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.
Tabla de contenidos
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.
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
.
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">
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.