Hace ya algún tiempo vi en una página web una imagen que estaba dividida en varias zonas, y según en que zona hicieras clic el enlace era diferente.
A continuación, puedes ver una captura de pantalla de la imagen que vi. Si haces clic en “Misión” te lleva a una página, pero si haces clic en “Objetivos” te lleva a otra página diferente. El selector es una única imagen, pero que está dividida en diferentes zonas con diferentes enlaces.
Ejemplo de imagen con varios enlaces. En este ejemplo, tenemos una imagen dividica en 5 zonas con 2 enlaces diferentes.
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
Para crear esas zonas sobre la imagen se utiliza la etiqueta HTML Map, que sirve para mapear imágenes. Pero el proceso para aprender a crear varias zonas y sus URLs directamente en HTML no es nada sencillo. Pero he encontrado una web online que te permite subir la imagen y luego dividirla en diferentes zonas, añadirles las correspondientes urls y finalmente descargar el código. Todo de una manera muy sencilla y visual. Aunque debemos crearnos una cuenta para descargar el código (es gratis).
Este tipo de mapeo de imágenes te puede servir también para crear mapas interactivos en la web y otras muchas cosas que se te puedan ocurrir.
ÍNDICE DEL POST
1.- Registrase en image-maps.com
La herramienta que vamos a utilizar para obtener el código se denomina “Image-Maps”, y puedes acceder a ella a través del siguiente botón.
ACTUALMENTE LA WEB IMAGE-MAP.COM NO ESTÁ DANDO SERVICIO. PRUEBA EN ESTA OTRA WEB IMAGE-MAP.NET
IR IMAGE-MAP
Para poder descargarte el código una vez que hayas subido la imagen y creados las diferentes zonas debes haber iniciado sesión.
Por lo que en primer lugar debes registrarte en la aplicación (es gratis). Para ello, haz clic en el enlace que aparece en la parte suprior derecha: “Register”.
¡IMPORTANTE!!: En el formulario de registro desmarca la opción “Suscribe for hosting and avanced features on image-maps.com! you Will be redirected to PayPal or Amazon….”. No se desmarcaría esta opción solo en caso de que quisiéramos disfrutar de funcionalidades premium de la herramienta. Pero, no es necesario para hacer lo que queremos.
Una vez registrado, inicia sesión si no estás logueado.
2.- Cargar imagen en la plataforma antes de hacer el mapeado
Lo primero que debemos hacer antes de realizar el mapeado (crear zonas en la imagen y asignarle un enlace) es subir la imagen a la plataforma.
Para subir la imagen, iremos a la home de la web y haremos clic en el botón “Browse for file”. A continuación, seleccionaremos la imagen desde nuestro PC y haremos clic en el botón “Abrir”.
Ahora haremos clic en el botón: “Star Mapping” (empezar mapeo)
Una vez cargada la imagen haremos clic en el enlace: “Click to continue” para comenzar con el mapeo.
Empezar el mapeo de la imagen, creando zonas y asignándoles URL
3.- Creación de zonas en la imagen y enlaces (Mapeo de la imagen)
Para crear la primera zona haremos lo siguiente:
i.- En Windows: haremos clic con el botón derecho del ratón y seleccionaremos “Create Poly”, para crear una polilínea (puedes hacer clic en cualquier parte de la pantalla).
ii.- En MAC: Haremos CTRL + Click” y seleccionaremos “Create Poly”, para crear una polilínea.
Crear polilinea para definir una zona de la imagen
Te aparecerá una ventana emergente, donde tendrás que poner la URL destino de la primera zona. En el campo: “Map URL” pon la URL de destino de la primera zona
A continuación, pon el ratón sobre el punto de inicio de la zona y haz clic con el botón izquierdo del ratón. Después, pon el ratón sobre otro punto y haz clic con el botón izquierdo. Conforme vayas marcando puntos se irá creando el área de acción que se marcará en color. Así sucesivamente hasta que marques el punto inicial para cerrar la zona y crear la primera zona sobre la imagen.
Introduce la URL de destino de la primera zona y empieza a crear el área de la zona en la imagen
Una vez que hagamos clic en el punto inicial habremos completado la creación de la zona. Para guardar la zona haremos clic en botón “SAVE” de la ventana emergente (recuerda haber puesto la url de destino de la zona).
El área de la imagen queda resaltada. Asegúrate de haber puesto la URL de destino y haz clic en el botón SAVE
Para crear la siguiente zona haremos exactamente lo mismo que hicimos para crear la primera zona. En Windows botón derecho del ratón y en MAC Ctrl + Click.
De esta manera iremos creando todas las zonas de la imagen
4.- Copiar código HTML de la imagen
Para copiar el código HTML que tendremos que insertar en wordpress, haz clic con el botón derecho del ratón y elige la opción: “Get Code”.
Se abrirá una ventana emergente.
Haz clic en la pestaña: “HTML Code”, haz scroll hasta que visualices el código HTML. Luego copia el código.
Copiar código HTML de las zonas o áreas de la imagen
Este código lo puedes pegar en la pestaña HTML del editor de WordPress, pero también lo puedes utilizar en el módulo código de la plantilla Divi o en el módulo texto (en la pestaña HTML)
Introducido el código ya tendrás la imagen con sus zonas y enlaces terminado.
5.- Sube la imagen original a tu wordpress y cambia la ruta de la imagen en el código.
Aún falta un último paso. Ahora tu imagen mapeada está tomando la imagen que has subido a la herramienta online.
Pero esa imagen desaparecerá en 24 horas.
Por este motivo, tienes que subir la imagen original a la biblioteca de wordpress (la misma imagen que subiste a la herramienta online).
i.- Subir imagen a Biblioteca wordpress: Entra en tu panel de administración de wordpress y haz clic en: “Medios > Añadir nuevo”.
A continuación, haz clic en el botón: “Selecciona archivos”.
Selecciona la imagen y haz clic en el botón: “Abrir”. A continuación, se subirá la imagen a la biblioteca de wordpress.
Imagen añadida a WordPress para remplazar a la que se carga desde la herramienta de mapeo
ii.- Copiar la URL de la imagen: Cualquier imagen subida a nuestro wordpress tiene una url única.
Ahora, si seguimos en la pantalla de la imagen anterior, haremos clic en el botón “Editar”.
Si, por el contrario, estamos en otra parte de la administración de wordpress, haremos clic en: “Medios”, y a continuación haremos clic en la imagen que acabamos de subir.
En el lateral derecho verás un campo que dice URL o URL de archivo. Esa, es la URL de la imagen. Cópiala y a continuación la pegaremos en un lugar determinado del código (Ojo, copia la URL completa)
Copiar url de la imagen subida a wordpress
iii.- Sustituir URL de la imagen en wordpress por la URL de la imagen en la plataforma: Sustituye la URL que has copiado por el contenido entre comillas del atributo src.
Es decir, sustituye la URL que has copiado de la imagen en wordpress por la parte que te resalto en la siguiente imagen (hazlo en la pestaña HTML del navegador).
Cambiar contenido de SRC URL wordpress por la url antigua. Se modifica el contenido resaltado de la imagen
A continuación, guarda la página.
Ahora sí lo tienes!!
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
hola que tal buenas tardes. vi tu video y si me ayudó bastante, solamente tengo una duda, como le hago para guardar esa imagen con los hipervinculos y mandarla a outlook. deja te comento para estar mas claros, tengo una firma digital y a esa firma le quiero agregar varios hipervinculos donde yo posicione el cursor le de click y me direccione a una pagina y asi sucesivamente. por favor me podrias aclarar esa duda
Buenas Mario
Tendrás que investigar si puedes insertar la imagen / firma como html en outlook. Si es así, no tienes que tener problema en hacerlo
Me gustaría también a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Curso Copywriting, Cursos sobre Divi, curso SEO General, Curso SEO Análisis de clics e impresiones, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, sobre Mailchimp, blog WordPress, etc. etc.
Hola, a mi se me desplazan los enlaces a la derecha y no encaja con las partes donde estan….que se puede hacer?
Buenas. Supongo que no los habrás establecido bien. Prueba a hacerlo otra vez desde el principio
a mi me ocurre lo mismo, los enlaces se desplazan y no concuerdan en el sitio.. pudiera ser por un tamaño diferente en la web de la imagen (he usado el mismo archivo) y que no contemple el código adaptar las coordenadas a la nueva proporción?
Hola Dani.
No lo creo, ya que la imagen se debería ampliar o reducir de manera proporcional. En caso de que se deformara la imagen, sí podría ser.
Haz alguna prueba donde te asegures que no cambie el tamaño de la imagen
un saludo
Buenas Joaquín, de antemano gracias por el video en YouTube sobre el Mapeo de imágenes. Realice todo el proceso,!los enlaces en p.c. funcionan relativamente bien pero en table y sobre todo en móviles quedan desplazados los enlaces. Será que puedes ofrecerme los servicios para sacar la web adelante.
Quedó en espera de respuesta
Buenas.
Veo que me has contactado también vía whatsapp. En lo que se refiere al tema de servicios te contesto vía whatsapp. En lo que se refiere al tema de mapeo en móviles y tablets, has de consultar a los desarrolladores de la aplicación online a ver si es un defecto de la aplicación y si existe algún tipo de solución. Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Cursos sobre Divi, Astra Pro, Elementor, Flatsome, Cursos sobre Woocommerce, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.
Está muy bien explicado,
Felicidades Joaquín Barberá.
Pero vaya q mala suerte que tengo hoy.
No puedo registrarme en Image-Maps, relleno el mail y el psw y no ocurre nada.
En lo referente al funcionamiento, funciona a la perfección, el problema es q al no poder registrarme creo que pierdo todo cada vez q me salgo.
Hola Jordi.
Contacta con Images-maps para comentarles que no puedes registrarte.
Aquí tienes el formulario de soporte
Hola gracias por el post! muy bueno!
Estoy trabajando con elementor y quisiera colocar una imagen mapeada en el slider utilizando el carrusel de imagenes de elementor. Pero allí uno carga la imagen (no colocas el código)… hay posibilidad de colocar una imagen mapeada en el slider?
gracias
Buenas.
Si el slider te permite añadir HTML, entonces si podrás. Pero, si no te deja añadir código HTML no se podría añadir la imagen mapeada.
Hola Joaquín, lo primero muchas gracias por el post y el trabajo.
He mapeado un mapa (valga la redundancia) y al principio cada ciudad estaba bien enlazada, pero a los días de subirlo todos los enlaces se han cambiado. Por ejemplo, hago click en Valladolid y me redirige a la entrada de Soria.
Sabes a que se puede deber el problema?
Saludos
Buenas.
No se por qué puede ser.
Comprueba si el código ha cambiado, aunque lo veo muy raro.
Buenas tardes,
¿como se puede hacer para que también funcione en la versión para móviles y tabletas?
En el pc me funciona perfectamente.
Gracias.
Buenas,
En principio debería funcionar en cualquier dispositivo
Hola! muchas gracias! seguí las instrucciones, y el código se ve perfecto, pero a pesar de eso, dos de las imagenes mapeadas muestran un enlace equivocado, aunque en el código lo tengan bien. Que podrá ser??
esta es la pagina, las imagenes son los logos de abajo:
http://megwyn.com/Y aqui esta el código:
Probe todos los links por aparte y todos están bien.
verifique todo y no se que pasa. Las dos ultimas llevan a paginas equivocadas. Me puedes ayudar? Gracias.
Buenas,
Qué cosa más rara,
¿los enlaces llevan a otras URLS diferentes a las que hay en el código?