Elemento map

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento map, junto con img y area, crea un mapa de imagen. Los mapas de imagen permiten a los autores definir secciones en una imagen y, opcionalmente, convertirlas en hipervínculos que apuntan a otros recursos. En otras palabras, los mapas de imagen hacen posbile la creación de un vínculo a partir de una o más secciones de la imagen (img) a la que se encuentran asociados.

Para asociar correctamente una imagen a un mapa de imagen (map), el valor del atributo usemap en la imagen debe coincidir con el valor del atributo name del mapa precedido por un signo numeral ("#").

Las áreas presentes en un mapa de imagen son declaradas mediante el elemento area, el cual puede definir diferentes tipos de figuras (círculos, rectángulos, polígonos y la totalidad de la imagen). Los elementos area deben declararse como hijos de map.

En versiones previas del estándar, los autores también podían definir las áreas de un mapa de imagen con el elemento a. En HTML5 sólo el elemento area provee esta funcionalidad.

Ejemplos

En el siguiente ejemplo, crearemos un mapa de imagen y lo asociaremos a la imagen. Dentro de éste, insertaremos dos áreas (area), una circular y la otra rectangular, que cubrirán las figuras que vemos en la imagen (un círuclo y un trozo de texto). Esto permitirá al usuario seguir el vínculo al hacer clic sólo en las áreas deseadas de la imagen, y no en la imagen entera.

Junto a este texto, también encontrarás una imagen con el esquema de las áreas que serán especificadas en el siguiente ejemplo. Éstas aparecen visibiles en esta imagen para una mejor comprensión.

<map name="image-map-1">
  <area href="../../tutorials.html" alt="Tutoriales HTML" shape="circle" coords="67,73,47">
  <area href="../../tutorials.html" alt="Tutoriales HTML" shape="rect" coords="60,54,142,99">
</map>
<img src="/assets/images/image-map-1-es.png" usemap="#image-map-1" alt="Mapa de imagen de ejemplo">
Tutoriales HTML Tutoriales HTML Mapa de imagen de ejemplo

Un par de cosas para notar en este ejemplo: primero, que los valores en los atributos shape y coords de los elementos area describen exactamente las áreas necesarias; y segundo, que los valores del atributo name en el elemento map y del atributo usemap en la imagen, son coincidentes (excepto por el signo numeral requerido).

Atributos

Atributos específicos

name

Un nombre que permite al mapa (map) ser referenciado por una imagen (img). Las imágenes se asociarán a este mapa cuando el valor de sus atributos usemap coincida con el valor de este atributo precedido por el signo numeral ("#").

La presencia de este atributo en el elemento map es obligatoria y su valor debe ser una cadena no vacía sin caracteres de espacio.

No puede haber más de un elemento map con el mismo valor en el atributo name. Si el atributo id también es especificado, su valor debe coincidir con el valor de name.

Ejemplo

<map name="mapa-de-las-azores">
  <area href="santa-maria.html" alt="Isla Santa Maria" shape="circle" coords="500,300,40">
</map>
<img src="las-azores.jpg" usemap="#mapa-de-las-azores" alt="Mapa de las Azores">

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.