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 de­no­mi­na­das áreas sensibles a enlaces de un mapa de imagen se crean con coor­de­na­das se­le­c­cio­na­das y se vinculan a URL o di­re­c­cio­nes 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 in­ter­ac­ti­vi­dad. Más co­n­cre­ta­me­n­te, los mapas de imágenes HTML pueden uti­li­zar­se para pro­po­r­cio­nar gráficos y vídeos en un documento HTML con varias áreas enlazadas y en las que se puede hacer clic. Las zonas de re­fe­re­n­cia in­te­gra­das pueden ser su­b­pá­gi­nas, hi­pe­r­ví­ncu­los a URL internas o externas o descargas. En cuanto el usuario hace clic en los elementos enlazados, se accede al contenido deseado o se des­en­ca­de­nan 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 ge­ne­ra­do­res de mapas de imágenes. Con estas he­rra­mie­n­tas online, solo tienes que cargar la imagen deseada y luego es­ta­ble­cer 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 in­te­grar­se en cualquier documento HTML en cuanto se hayan definido las re­s­pe­c­ti­vas áreas de re­fe­re­n­cia. La ventaja de los mapas reside en la po­si­bi­li­dad de enlazar varios destinos dentro de un gráfico o vídeo. Entre los múltiples usos y ámbitos de apli­ca­ción de los mapas de imágenes HTML se pueden citar los si­guie­n­tes:

• Mapas con zonas de re­fe­re­n­cia clicables para regiones, ciudades, su­cu­r­sa­les de empresas o centros de servicios
• Imágenes de recetas con in­fo­r­ma­ción adicional sobre los in­gre­die­n­tes mostrados
• Banners pu­bli­ci­ta­rios con diversos productos, ca­te­go­rías o servicios enlazados
• Vi­sua­li­za­ción de in­fo­r­ma­ción adicional o pu­bli­ci­dad en vídeos
• Una página web como mapa de imágenes con varios elementos de na­ve­ga­ción
• Vi­sua­li­za­ción de di­fe­re­n­tes 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 re­fe­re­n­cia al mapa. En otras palabras, gracias al nombre del mapa, el objetivo deseado puede anclarse, enlazarse y di­re­c­cio­nar­se en un gráfico o vídeo. A co­n­ti­nua­ción, se ofrecen in­s­tru­c­cio­nes sobre las coor­de­na­das de las zonas de re­fe­re­n­cia vi­n­cu­la­das.

Un mapa de imágenes HTML puede colocarse en cualquier posición deseada de un documento HTML. Para ello, se definen áreas y coor­de­na­das (coords) con las que se es­pe­ci­fi­ca la posición, el tamaño y la forma del área de re­fe­re­n­cia. Las áreas pueden colocarse en un gráfico en forma de re­c­tá­n­gu­los, polígonos o círculos. Las coor­de­na­das uti­li­za­das dependen de la forma del área de re­fe­re­n­cia.

Puedes utilizar el atributo HTML <area> para definir áreas in­di­vi­dua­les del mapa de imagen. Para utilizar un mapa de imágenes, se requiere al menos un atributo area. Los si­guie­n­tes atributos HTML pueden uti­li­zar­se para es­pe­ci­fi­car las pro­pie­da­des del mapa de imágenes y sus áreas de re­fe­re­n­cia in­di­vi­dua­les:

• shape: los atributos shape pueden uti­li­zar­se para definir las formas de las áreas de re­fe­re­n­cia sobre las que se puede hacer clic en un gráfico. Esto puede hacerse uti­li­za­n­do rect para re­c­tá­n­gu­los, circle para círculos o poly para polígonos. La sintaxis de rect es rect = x1,y1,x2,y2. Mientras que x1 e y1 re­pre­se­n­tan las coor­de­na­das 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 coor­de­na­das que delimitan un área de re­fe­re­n­cia. Para ello, las áreas gráficas se marcan con píxeles, por ejemplo, uti­li­za­n­do un editor gráfico.
• href: el atributo href permite hacer re­fe­re­n­cia a las URL y di­re­c­cio­nes internas o externas enlazadas.
• alt: el texto al­te­r­na­ti­vo puede in­te­grar­se con el atributo alt si hay problemas para cargar el mapa. Esto es útil, por ejemplo, para los na­ve­ga­do­res que solo utilizan texto o para ga­ra­n­ti­zar una usa­bi­li­dad accesible.
• title: el atributo title integra un texto breve con in­fo­r­ma­ción im­po­r­ta­n­te que se muestra cuando los usuarios pasan el ratón por encima de un área de imagen.
• img: la etiqueta img puede uti­li­zar­se para integrar y mostrar un archivo de imagen en do­cu­me­n­tos HTML.

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

Una vez co­n­cre­ta­do el mapa de imágenes, puede in­te­grar­se en una página web en la posición deseada uti­li­za­n­do la etiqueta HTML <img>. Para di­re­c­cio­nar el mapa de imágenes deseado y ponerlo a di­s­po­si­ción, utiliza también el elemento ya me­n­cio­na­do <map>. El siguiente ejemplo muestra la in­te­gra­ció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. Cua­l­quie­ra que haga clic en estas áreas es re­di­ri­gi­do au­to­má­ti­ca­me­n­te a las re­s­pe­c­ti­vas páginas de destino, que se abrirán en una nueva ventana.

Close