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;
}