Etiqueta <map> de HTML

Definición y uso

<map> requiere una etiqueta para definir un mapa de imágenes. Un mapa de imágenes (image map, un tipo de navegación de mapa de particiones) es una imagen con áreas clicables.

<map> el elemento atributo nameeste atributo es equivalente a elemento <img> del Atributo usemap asociaciones relacionadas, creando una relación entre la imagen y el mapa.

<map> contiene algunas Elemento <area>，define las áreas clicables en un mapa de imágenes.

Vea también:

Manual de Referencia HTML DOM:Objeto Mapa

Ejemplo

Ejemplo 1

Mapa de áreas clicables:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

Prueba por tu cuenta

Ejemplo 2

Otra imagen de mapa de áreas clicables:

<img src="solarsystem.png" width="1024" height="576" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,114,576" alt="Sun" href="sun.html">
  <area shape="circle" coords="190,230,5" alt="Mercury" href="mercury.html">
  <area shape="circle" coords="228,230,5" alt="Venus" href="venus.html">
</map>

Prueba por tu cuenta

Atributo

Atributo Valor Descripción
name Nombre del mapa Requerido. Define el nombre del mapa de imágenes.

Atributos globales

<map> La etiqueta también admite Atributos globales en HTML.

Atributos de eventos

<map> La etiqueta también admite Atributos de evento en HTML.

Configuración CSS predeterminada

La mayoría de los navegadores mostrarán los valores por defecto siguientes <map> Elemento:

map {
  display: inline;
}

Compatibilidad con navegadores

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte