Hace bastantes años cuando empezaba hacer mis primeros proyectos web, después de tener claro el diseño en Photoshop solía cortar la imagen definitiva y generar el típico puzzle de pequeñas imágenes para poder asignar los enlaces que irían, por ejemplo, en los diferentes apartados de un menú. Me acuerdo que empecé con FromPage y posteriormente con Dreamweaver, a lo largo del ‘96. En fin, al cabo de poco tiempo aprendí a hacer mapa de imágenes (image mapping), se trata de insertar en una imagen áreas invisibles por medio de coordenadas y estas zonas asociadas a un hipervínculo. En otras palabras, añadir más de un link en una misma imagen sin tener que dividirla.

Para que te hagas una idea, imagina que tienes un blog y quieres añadir en tu artículo una imagen con los iconos de tus redes sociales favoritas* y quisieras añadir el link a cada una de ellas, o tal vez escribes sobre un evento y quieres insertar una foto donde aparecen varias personas y quisieras vincular cada persona a su red social, o quizá redactar una reseña comparando dos productos y cuentas solo con una imagen con los dos productos y necesitas que cada producto esté vinculada a su web. ¿verdad que te gustaría añadir más de un link en una misma imagen y que cada enlace vaya a diferentes webs o redes sociales?

Por fortuna, hoy en día para esto no hace falta tener conocimientos de HTML ni de maquetación web. Fíjate en la imagen al inicio de este post, verás que cada icono apunta a su respectiva red de manera independiente. ¿Lo ves? Pués bien, para ello hay una herramienta que te ofrece esta funcionalidad y además es gratuita. Se llama Image Maps y es súper sencilla de utilizar.

Te cuento un poco como va, empiezas insertando la imagen que te interesa y haces click en “Start Mapping”. Aparecerá el mensaje “Your image was uploaded... simplemente haz clic en “click to continue” y visualizas tu imagen con la instrucción: “utiliza el botón derecho del mouse si utilizas PC o control + clic si utilizas Apple para que se te despliegue el menú de opciones”. A partir de aquí podrás empezar de verdad a generar vínculos. Cada área que añadas podrás rellenar varios campos, simplemente con que añadas el link en la ventana “Map URL” ya funcionará. Sin embargo, intenta no olvidar añadir los “Title y Alt”.  ...ha y pon siempre la opción “blank” en la pestaña “Target” que se encuentra en el apartado “Events” del menú. Esto permitirá que el usuario al hacer clic en tu imagen abra una ventana nueva del navegador. De ese modo seguirá estando en tu web y no marchará.

Cuando termines de colocar todos los links vuelve a desplegar el menú para obtener el código HTML en la opción “Get Code” que copiarás y pegarás en tu blog en el “modo de texto”

Intenta hacerlo, verás que es muy fácil.

Espero que te sirva de ayuda.

*te propongo una web Findicons donde puedrás descargar iconos de social media en buena calidad

Otra alternativa para añadir más de un link en una misma imagen es esta herramienta html-map