He leído y acepto la política de privacidad

Acepto recibir contenido o propuesta comercial de diligent

¿Como añadir más de un link en una misma imagen? Descubre Image Maps

Escrito por: Diligent Team

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

Comments

cheryl
7 abril, 2015 at 7:52 pm

Hola, quisiera saber si esto me funcionaria para insertarlo en gmail, o sea si los hipervinculos al salir la imagen en el cuerpo del mensaje funcionarian.

Espero pueda ayudarme.

Gracias.

    Jerom Tomàs
    8 abril, 2015 at 8:39 pm

    Hola Cherly gracias por escribir.

    A ver si me aclaro. Dices que quieres insertar dentro de un email una imagen con más de un link? La verdad no lo he probado nunca desde un correo, tan pronto como pueda lo intentaré y prometo responderte.

    Te animo a que lo intentes también.

    Un saludo.

SSGG
10 junio, 2016 at 6:44 pm

Buenas tardes,
Tengo la misma duda que cheryl says, ¿Alguien pudo probar y funcionaba? se puede insertar esta imagen creada con esta web en un correo? Gracias.

    Jerom Tomàs
    10 junio, 2016 at 7:05 pm

    Hola A todos, antes que nada gracias por escribir y perdonar el retraso de la respuesta. Hace un año que prometí decir algo y se me ha pasado el tiempo.

    Al grano, desde Thunderbird funciona si lo colocas en la firma de tu correo.
    Se que también funciona en la firma de Gmail

    Desconozco para el caso de otros administradores de correo.

    Un cordial saludo a todos.

Noe Becerril
14 junio, 2016 at 5:21 pm

Hola Jerome me podrias ayudar?… como se pone la imagen en las firmas de correo?… no se mucho de programación ni eso y me confundi bastante al tratar de insertar esto en la imagen de firma de correo de outlook:

no existe nada de informacion de este tipo

    Jerom Tomàs
    19 junio, 2016 at 12:06 pm

    Hola Noe, tal como cuenta en el artículo, desde http://www.image-maps.com/ puedes generar el código html que permite poner varios links en la misma imagen. La verdad que Outlook no lo conozco mucho, pero seguro que existe el apartado para editar tu firma digital. Una vez allí, prueba insertar el código html a ver si funciona.

    Espero haber sido de ayuda.

    Un cordial saludo

Albertus
22 julio, 2016 at 5:22 pm

Buenas, me surge el problema de que no es responsive, y me he fijado que la tuya si que lo es, la he utilizado insertando el código en un wordpress, ( si pongo una imagen el responsive actúa automáticamente) . Nose si tendrás alguna solución, agregando o cambiando algo el código que da, o en css. Gracias

Karem Martinez
21 septiembre, 2017 at 2:14 pm

Muchas gracias. Me funciona más http://www.html-map.com Me sirvió mucho que lo compartieras.

    Jerom
    21 septiembre, 2017 at 2:43 pm

    Gracias Karem por tu comentario y aportación. Un cordial saludo.

Vicente Hernández
26 diciembre, 2017 at 3:03 pm

Buenos días, buen artículo!!. Como se establece la propiedad data maphilight y para que sirve
Gracias, Un Saludo

Martin
12 abril, 2018 at 5:31 pm

hola, quiero hacer un jpg en donde hay fotos y textos, y en dos lugares quiero poner links de vinculos a distintas paginas web. Este jpg lo quiero enviar por mail, como hago? gracias

    Jerom
    16 abril, 2018 at 4:22 pm

    Tendrías que editar el mail en HTML1. Intenta con este código:

    <a href="http://midireccion" target="_blank">
    <img src="http://direcciondelaimagen">
    </a>

    Un saludo.

Emiliano
24 mayo, 2018 at 12:51 am

Buenas noches, espero puedas responder mi pregunta, necesito hacer algo sobre un mapa, sobre este mapa que cada provincia sea un enlace a otro lugar con informacion referida a esa provincia, no se si me explico, lo podre hacer con las herramientas que explicas en el blog?

    Jerom
    12 junio, 2018 at 7:30 am

    Hola Emiliano, en principio si. Pero para serte sincero hace muuuuucho tiempo que no uso esta herramienta online. Espero que te sierva. Un abrazo y suerte.

Luciano
8 agosto, 2018 at 7:38 pm

Hola Jerom! Existe una manera de insertar enlaces en un archivo de imagen, como un jpg, para enviar por whatsapp y quien lo recibe clickee en la imagen redirigiendolo a una url o marcador de telefono?? Como podria hacer eso?

    Jerom
    14 agosto, 2018 at 1:54 pm

    Hola Luciano buenas tardes, pues la verdad no tengo idea. Tan pronto como sepa algo te lo haré saber. Un saludo.

Pablo Figueroa
12 octubre, 2018 at 6:19 pm

Y para usar esta imagen para enviarla por correo electrónico igual con el código y se generará en el correo

    Diligent Team
    27 octubre, 2018 at 8:25 am

    Hola Pablo gracias por escribir. Pues la verdad no estoy del todo seguro. Durante un tiempo se que se podía hacer porque yo lo hacía con la firma digital. Pero de esto hace años. Estoy seguro que si preguntas a Google, te dará una respuesta.

Pablo Figueroa
12 octubre, 2018 at 8:10 pm

Otra pregunta más se pueden enviar por medio de redes sociales y que conserven los enlaces???

    Diligent Team
    27 octubre, 2018 at 8:29 am

    Hola nuevamente Pablo, te doy la misma respuesta al comentario anterior. Aun que para este caso si que te diría que es más difícil. Nosotros trabajamos mucho en redes sociales y no recuerdo el caso de compartir una imagen con más de un link.

Brenda
23 octubre, 2018 at 7:49 pm

ESTO FUE LO MÁS SENCILLO DE MI VIDA¡¡¡¡¡
MIL GRACIAS 😀

    Diligent Team
    27 octubre, 2018 at 8:15 am

    Hola Brenda que bueno que te haya sido de utilidad. Esperamos volverte a ver por aquí. Un saludo

Deja un comentario

Alimenta con lectores tu blog

Recibe el ebook en formato pdf y empieza a desarrollar tu blog desde hoy.

Acepto las política de privacidad

Acepto recibir la newsletter de diligent

Al darte de alta te suscribes a la newsletter de diligent. Solo te enviaremos contendido interesante para proyectos digitales

×
Del blog al éxito

Recibe el ebook en formato pdf y empieza a desarrollar tu blog desde hoy.

Acepto las política de privacidad

Acepto recibir la newsletter de diligent

Al darte de alta te suscribes a la newsletter de diligent. Solo te enviaremos contendido interesante para proyectos digitales

×
Como triunfar con tu tienda online

Descarga el eBook en Formato PDF y empieza a desarrollar tu tienda online.

Acepto las política de privacidad

Acepto recibir la newsletter de diligent

Al darte de alta te suscribes a la newsletter de diligent. Solo te enviaremos contendido interesante para proyectos digitales

×
Fotografía de producto

Descarga el eBook en Formato PDF y empieza a desarrollar tu tienda online.

Acepto las política de privacidad

Acepto recibir la newsletter de diligent

Al darte de alta te suscribes a la newsletter de diligent. Solo te enviaremos contendido interesante para proyectos digitales

×