Mapas de imagen en WordPress

Uno de los mejores recuerdos que tengo del uso de Dreamweaver para hacer webs es la creación de mapas de imagen, un modo estupendo de establecer distintas áreas de una sola imagen que, por ejemplo, lleven distintos enlaces. Pero ¿y en WordPress? ¿cómo hago mapas de imagen?

Vale, siempre puedo generar el HTML en Dreamweaver, o tu editor favorito, y pegarlo en una entrada, página o donde quieras, pero ¿se pueden hacer mapas de imagen directamente en WordPress? Sí, con plugins, cómo no. Vamos a ver un par de ellos bien majos.

ImageMapper

Este plugin inicialmente se diseño para comics web, pero como es muy fácil de personalizar en realidad se puede usar para cualquier tipo de imagen, no solo comics.

Basado en el plugin jQuery ImageMapster permite, por ejemplo:

  • Dirigir mediante un enlace a otra página desde una parte de una imagen.
  • Mostrar un texto emergente al pasar el curso sobre una parte de la imagen.
  • Mostrar textos e incluso imágenes más grandes al pasar el cursor sobre una parte de la imagen.

Una vez instalado y activo se usa así:

  1. Elige el menú Image maps de la izquierda del panel de administración de WordPress y crea un nuevo mapa de imagen.
  2. Elige el archivo de imagen y guarda la publicación para subirlo.
  3. Para añadir nuevas áreas a la imagen empieza por crear la ruta sobre la que hay que hacer clic en la imagen. Cuando ya tengas la ruta presiona el botón Add area. El área aparecerá en la lista de áreas de la página de edición del mapa de imagen.
  4. Puedes editar el contenido del área haciendo clic en la página Edit de la lista de áreas.

Para insertar el mapa de imagen en una entrada o página:

  1. Una vez hayas creado el mapa de imagen con los pasos anteriores ve a la entrada o página y haz clic en Añadir objeto y elige la nueva pestaña Image map.
  2. Haz clic en el mapa de imagen que quieras insertar en la entrada o página.

Aquí un par de ejemplos de las virguerías que puedes hacer:

Draw Attention

Es perfecto para crear mapas de imagen en los que añadir anotaciones a las caras de fotos de grupos, añadir URLs al hacer clic en zonas de una imagen, destacar partes de un plano, mostrar fotos al pasar por un área de una foto, de todo.

Entre sus principales ventajas es de destacar sobre todo que es totalmente adaptable a dispositivos móviles (responsive) y que se mostrarán los mapas de imagen aunque el visitante tenga desactivado el JavaScript en su navegador.

Lo mejor es que veas las capturas y, sobre todo, el vídeo. El plugin es una verdadera gozada …

¿Alguna idea más?

Si tienes alguna otra idea de como crear mapas de imagen en WordPress ya tardas en compartirlo en los comentarios.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(8 votos, promedio: 4.9)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

8 comentarios en “Mapas de imagen en WordPress”

  1. ¡Draw Attention, que maravilla de plugin! Muchas gracias nuevamente Fernando, lo cierto es que hace siglos que no hago un mapa de imagen, desde que se implementó el Responsive Web Design no he tenido la oportunidad de volver a usar uno, pero es algo que aún tiene utilidad en imágenes grandes, planos como el de la captura…

    Saludos!

  2. Pingback: Top RSS semanal: RedSys WooCommerce, Edubuntu, juegos para Linux 

  3. Voy a mirarlo a ver qué tal va. Hace unos días hice una página 404 personalizada con un menú en la imagen de una cámara de fotos y esto puede hacer que quede mucho mejor que la opción que usado de usar un servicio online para crearlo. Además puede servir muy bien para hacer explicaciones de gráficos, algo a tener en cuenta para dar mejor información a los visitantes de las páginas. Gracias.

  4. Angelica Soto

    Hola estoy probando el plugin, ya subí la imagen, cree las areas y configure, pero no me funciona y dos tengo un menu desplegable que queda debajo de la imagen y no se ve. Si alguien me puede ayudar por favor

  5. Alberto Sanchez

    Yo he usado un servicio web llamado ThingLink, que en su versión gratuita ya te deja insertar el mapa interactivo en tu web o en cualquier red social.

    Además, si usas Visual Composer, el elemento Hotspot te crea estos mapas de imagen con una pequeña personalización.

  6. Me compré el pluging WP Google Maps – Pro Add-on porque tengo que realizar un mapa. El problema es que no sé qué tema elegir. He visto alguna cosa hecha en el Bridge y me ha gustado.¿Me podéis recomendar alguno? Gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido