Ayuda WordPress

Recursos, themes, plugins y tutoriales en español

Mapas de imagen en WordPress

Por Fernando el Nov 26, 2015 09:44 pm

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í:

Elige el menú Image maps de la izquierda del panel de administración de WordPress y crea un nuevo mapa de imagen.
Elige el archivo de imagen y guarda la publicación para subirlo.
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.
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:

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.
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 …