Etiqueta HTML <mapa>


Ejemplo

Un mapa de imagen, con áreas en las que se puede hacer clic:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

Más ejemplos de "Pruébelo usted mismo" a continuación.


Definición y uso

La <map>etiqueta se utiliza para definir un mapa de imagen. Un mapa de imagen es una imagen con áreas en las que se puede hacer clic.

El atributo de nombre requerido del <map>elemento está asociado con el atributo usemap de <img> y crea una relación entre la imagen y el mapa.

El <map>elemento contiene una serie de elementos <area> , que definen las áreas en las que se puede hacer clic en el mapa de imagen.


Compatibilidad con navegador

Element
<map> Yes Yes Yes Yes Yes


Atributos

Attribute Value Description
name mapname Required. Specifies the name of the image map

Atributos globales

La <map>etiqueta también es compatible con los atributos globales en HTML .


Atributos de eventos

La <map>etiqueta también es compatible con los atributos de eventos en HTML .


Más ejemplos

Ejemplo

Otro mapa de imágenes, con áreas en las que se puede hacer clic:

<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

páginas relacionadas

Referencia HTML DOM: Objeto de mapa


Configuración predeterminada de CSS

La mayoría de los navegadores mostrarán el <map>elemento con los siguientes valores predeterminados:

map {
  display: inline;
}