Ejemplo
Una imagen-mapa, se puede hacer clic con áreas:
<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>
Inténtalo tú mismo " Definición y Uso
El <area> etiqueta define un área dentro de una imagen de mapa de (en una imagen de mapa es una imagen con áreas se puede hacer clic).
El <area> elemento siempre está anidado dentro de un <map> etiqueta.
Nota: El usemap atributo en el <img> etiqueta está asociada con el <map> nombre del atributo del elemento, y crea una relación entre la imagen y el mapa.
Soporte para el navegador
| Elemento | |||||
|---|---|---|---|---|---|
| <area> | Sí | Sí | Sí | Sí | Sí |
Diferencias entre HTML 4.01 y HTML5
HTML5 tiene algunos atributos nuevos, y algunos atributos HTML 4.01 ya no se soportan.
Diferencias entre HTML y XHTML
En el HTML <area> etiqueta tiene ninguna etiqueta final.
En XHTML el <area> etiqueta debe estar debidamente cerrado.
atributos
= Nuevo en HTML5.
| Atributo | Valor | Descripción |
|---|---|---|
| alt | text | Especifica un texto alternativo para la zona. Requerido si el href atributo está presente |
| coords | coordinates | Especifica las coordenadas de la zona |
| download | filename | Especifica que el objetivo se descarga cuando un usuario hace clic en el hipervínculo |
| href | URL | Especifica el destino de hipervínculo para el área |
| hreflang | language_code | Especifica el idioma de la dirección URL de destino |
| media | media query | Especifica lo que los medios de comunicación / dispositivo de la dirección URL de destino está optimizado para |
| nohref | value | No se admite en HTML5. Especifica que un área no ha asociado enlace |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag | Especifica la relación entre el documento actual y la dirección URL de destino |
| shape |
default rect circle poly | Especifica la forma de la zona |
| target | _blank _parent _self _top framename | Especifica dónde abrir la URL de destino |
| type | media_type | Especifica el tipo de soporte de la dirección URL de destino |
Los atributos globales
El <area> etiqueta también es compatible con el de los atributos globales en HTML .
Atributos de eventos
El <area> etiqueta también es compatible con la atributos de eventos en HTML .
Páginas relacionadas
Referencia HTML DOM: Objeto de la zona
Ajustes por defecto CSS
La mayoría de los navegadores mostrarán el <area> elemento con los siguientes valores predeterminados:
area {
display:
none;
}