Mapa de imágenes HTML: gráficos clicables con la etiqueta map

Un mapa de imágenes HTML se refiere a gráficos o vídeos de páginas web que tienen varias áreas clicables que conducen a URL internas o externas. Las denominadas áreas sensibles a enlaces de un mapa de imagen se crean con coordenadas seleccionadas y se vinculan a URL o direcciones web asociadas.

¿Qué es un mapa de imágenes HTML?

Los mapas de imágenes HTML son gráficos en los que se puede cliclar mejorando la facilidad de uso y la interactividad. Más concretamente, los mapas de imágenes HTML pueden utilizarse para proporcionar gráficos y vídeos en un documento HTML con varias áreas enlazadas y en las que se puede hacer clic. Las zonas de referencia integradas pueden ser subpáginas, hipervínculos a URL internas o externas o descargas. En cuanto el usuario hace clic en los elementos enlazados, se accede al contenido deseado o se desencadenan acciones.

La etiqueta <map> en HTML se utiliza para crear mapas de imágenes. Mientras que la etiqueta <img> en HTML se utiliza para integrar el mapa de imágenes terminado.

Si no quieres crear tu propio mapa de imágenes HTML, puedes utilizar generadores de mapas de imágenes. Con estas herramientas online, solo tienes que cargar la imagen deseada y luego establecer los enlaces deseados en las áreas de la imagen.

¿Para qué se puede utilizar un mapa de imágenes HTML?

Un mapa de imágenes puede integrarse en cualquier documento HTML en cuanto se hayan definido las respectivas áreas de referencia. La ventaja de los mapas reside en la posibilidad de enlazar varios destinos dentro de un gráfico o vídeo. Entre los múltiples usos y ámbitos de aplicación de los mapas de imágenes HTML se pueden citar los siguientes:

• Mapas con zonas de referencia clicables para regiones, ciudades, sucursales de empresas o centros de servicios
• Imágenes de recetas con información adicional sobre los ingredientes mostrados
• Banners publicitarios con diversos productos, categorías o servicios enlazados
• Visualización de información adicional o publicidad en vídeos
• Una página web como mapa de imágenes con varios elementos de navegación
• Visualización de diferentes modos de juego, funciones o niveles en juegos online

¿Cómo se crea un mapa de imágenes HTML?

Para crear un mapa de imágenes, se utiliza la etiqueta <map> en HTML. Además, se debe utilizar el atributo name para poder hacer referencia al mapa. En otras palabras, gracias al nombre del mapa, el objetivo deseado puede anclarse, enlazarse y direccionarse en un gráfico o vídeo. A continuación, se ofrecen instrucciones sobre las coordenadas de las zonas de referencia vinculadas.

Un mapa de imágenes HTML puede colocarse en cualquier posición deseada de un documento HTML. Para ello, se definen áreas y coordenadas (coords) con las que se especifica la posición, el tamaño y la forma del área de referencia. Las áreas pueden colocarse en un gráfico en forma de rectángulos, polígonos o círculos. Las coordenadas utilizadas dependen de la forma del área de referencia.

Puedes utilizar el atributo HTML <area> para definir áreas individuales del mapa de imagen. Para utilizar un mapa de imágenes, se requiere al menos un atributo area. Los siguientes atributos HTML pueden utilizarse para especificar las propiedades del mapa de imágenes y sus áreas de referencia individuales:

• shape: los atributos shape pueden utilizarse para definir las formas de las áreas de referencia sobre las que se puede hacer clic en un gráfico. Esto puede hacerse utilizando rect para rectángulos, circle para círculos o poly para polígonos. La sintaxis de rect es rect = x1,y1,x2,y2. Mientras que x1 e y1 representan las coordenadas de la esquina superior izquierda, x2 e y2 definen la esquina inferior derecha. La sintaxis para circle es circle = xc,yc,radio. La sintaxis para polígonos es poly = x1,y1,x2,y2,x3,y3 ....
• coords: el atributo coords define las coordenadas que delimitan un área de referencia. Para ello, las áreas gráficas se marcan con píxeles, por ejemplo, utilizando un editor gráfico.
• href: el atributo href permite hacer referencia a las URL y direcciones internas o externas enlazadas.
• alt: el texto alternativo puede integrarse con el atributo alt si hay problemas para cargar el mapa. Esto es útil, por ejemplo, para los navegadores que solo utilizan texto o para garantizar una usabilidad accesible.
• title: el atributo title integra un texto breve con información importante que se muestra cuando los usuarios pasan el ratón por encima de un área de imagen.
• img: la etiqueta img puede utilizarse para integrar y mostrar un archivo de imagen en documentos HTML.

¿Cómo integrar un mapa de imágenes en una página HTML?

Una vez concretado el mapa de imágenes, puede integrarse en una página web en la posición deseada utilizando la etiqueta HTML <img>. Para direccionar el mapa de imágenes deseado y ponerlo a disposición, utiliza también el elemento ya mencionado <map>. El siguiente ejemplo muestra la integración:

<img src="imagendeplaya.jpg" usemap="#image-map"> 
 
<map name="image-map"> 
    <area target="_blank" alt="playa" title="playa" href="https://example.com/playa" coords="1,928,3260,1834" shape="rect"> 
    <area target="_blank" alt="mar" title="mar" href="https://example.com/mar" coords="3263,556,7,919" shape="rect"> 
    <area target="_blank" alt="cielo" title="cielo" href="https://example.com/cielo" coords="3263,510,10,0" shape="rect"> 
</map>

En este ejemplo, se han definido tres áreas para la imagen de la playa donde se puede clicar: playa, mar y cielo. Cualquiera que haga clic en estas áreas es redirigido automáticamente a las respectivas páginas de destino, que se abrirán en una nueva ventana.

Close