Elemento map en HTML

El elemento html map se utiliza con un elemento <area> para definir un mapa de la imagen. Es decir, un área de la imagen en la que se puede hacer clic.

Un ejemplo del uso de un elemento <map> con un nombre plano para definir un mapa que consta de dos círculos (a través del elemento <area>), cada uno apuntando a otra página, luego usar ese mapa en un elemento <img> usando la propiedad usemap:

< map  name = "plano" > 
  < area  shape = "circle"  coords = "50,65,65"  href = "left.html" > 
  < area  shape = "circle"  coords = "250,85, 85"  href = "right.html" > 
</ map > 
< img  usemap = "#plano"  src = "https://bigcode.es/plane/600x400"  alt = "600 x 400 plano">

Etiqueta html map

Clasificaciones de contenido	Elemento organizativo o elemento normal.
Contenido permitido	Cualquier elemento tiene un fondo transparente.
Acrónimo	Las etiquetas de inicio o finalización no se pueden omitir.
Elementos del padre	Cualquier elemento que acepte contenido normal.
Interfaz DOMO	`HTMLMapElement`

Características

En este elemento html map se pueden utilizar propiedades globales.

`name`

Esta propiedad le da al mapa un nombre para que podamos referirnos a él. Esta propiedad debe estar presente, debe tener un valor que no sea nulo y no debe contener espacios.

Su valor puede no ser igual al valor name de propiedad de <map> otro elemento del documento. Si a un atributo se le da un valor, id entonces su valor y el valor de ese atributo deben ser iguales.

Formato predeterminado

La mayoría de los navegadores muestran el elemento <map> con la propiedad establecida display en inline:

map {
  display: inline;
}

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
Soportado	Soportado	Soportado	Soportado	Soportado