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.

 

imagen con zonas diferentes y urls diferentes enlaces

Ejemplo de imagen con varios enlaces. En este ejemplo, tenemos una imagen dividica en 5 zonas con 2 enlaces diferentes.

 

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.

 

 

 

 

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.

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

 

¿Aún no conoces la plantilla Divi para WordPress?. Aquí tienes toda la info sobre la mejor plantilla para WordPress: Plantilla Divi

 

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

 

Añadir imagen con varios enlaces a wordpress

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 área en la imagen con su url

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

 

Aprende a crear una página web con WordPress y la plantilla Divi con mi curso online: Curso wordpress online con Divi

 

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.

 

añadir URL y crearun area o zona en 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).

 

Guardar zona en la imagen y enlace

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.

 

HTML MAP areas de la imagen 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.

 

Aprende a personalizar la separación o división de secciones de una web con Divi: Divisores secciones wordpress

 

 

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.

 

subir imagen biblioteca wordpress

Imagen añadida a WordPress para remplazar a la que se carga desde la herramienta de mapeo

Aprende a crear una página web corporativa o de empresa: Elementos de una web corporativa

 

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)

 

ver y copiar url o ruta de la imagen de la biblioteca de wordpress

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 url de la imagen subida a wordpress por la anterior

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 un bloguer al que le encanta el diseño web, me apasiona WordPress y la formación. Me encantaría que este blog (horizonweb.es) te sirviera de ayuda, seas un profesional en el sector o no. Me encantaría poder ayudarte a desarrollar tu proyecto online, ya sea una web de empresa o autónomo, un blog, una plataforma de cursos online o cualquier otro tipo de proyecto.

Compártelo ya!!

RECIBE GRATIS CURSO WORDPRESS/DIVI Y MÁS:

 1.- CURSO WORDPRESS Y DIVI (22 vídeos)

2.- GUÍA PARA CREAR UNA PÁGINA WEB PROFESIONAL

3.- VÍDEO TRAINING, MIS PLUGINS IMPRESCINDIBLES WORDPRESS

4.- GUÍA TALLER SEO PARA WORDPRESS

Consentimiento

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.