Elemento map en HTML

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 contenidoElemento organizativo o elemento normal.
Contenido permitidoCualquier elemento tiene un fondo transparente.
AcrónimoLas etiquetas de inicio o finalización no se pueden omitir.
Elementos del padreCualquier elemento que acepte contenido normal.
Interfaz DOMOHTMLMapElement

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

ChromeFirefoxEdgeSafariÓpera
SoportadoSoportadoSoportadoSoportadoSoportado