Etiqueta <area> HTML

Definición y uso

<area> etiqueta define las áreas dentro del mapeo de imagen (el mapeo de imagen es una imagen con áreas clicables, es decir, un gráfico de respuesta de partición del cliente).

<area> El elemento siempre está anidado en Etiqueta <map>dentro.

Nota:Elemento <img> en Atributo usemap con Elemento <map> del Atributo nameRelacionado, crea una asociación entre la imagen y el mapeo.

Véase también:

Manual de Referencia de HTML DOM:Objeto Área

Ejemplo

Ejemplo 1

Mapeo 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 personalmente

Ejemplo 2

Otra imagen de mapeo 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="Sol" href="sun.html">
  <area shape="circle" coords="190,230,5" alt="Mercurio" href="mercury.html">
  <area shape="circle" coords="228,230,5" alt="Venus" href="venus.html">
</map>

Prueba personalmente

Atributo

Atributo Valor Descripción
alt Texto Especifica el texto alternativo del área. Es obligatorio si existe el atributo href.
coords Valores de coordenadas Especifica las coordenadas del área.
download Nombre del archivo Especifica que se descargue el objetivo cuando el usuario haga clic en el hipervínculo.
href URL Especifica el objetivo del hipervínculo del área.
hreflang Código de idioma Especifica el idioma del URL de destino.
media Consulta de medios Especifica el medio / dispositivo optimizado del URL de destino.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 Especifica la información de referencia que se enviará junto con el enlace.
rel
  • alternate
  • author
  • bookmark
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • prefetch
  • prev
  • search
  • tag
 Especifica la relación entre el documento actual y el URL de destino.
shape
  • default
  • rect
  • circle
  • poly
 Especifica la forma del área.
target
  • _blank
  • _parent
  • _self
  • _top
  • Nombre del cuadro
 Especifica dónde abrir el URL de destino.
type Tipo de medio Especifica el tipo de medio del URL de destino.

Atributos globales

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

Atributos de eventos

<area> La etiqueta también admite Atributos de eventos en HTML.

Configuración CSS predeterminada

La mayoría de los navegadores mostrarán los siguientes valores predeterminados <area> Elemento:

area {
  display: none;
{}

Compatibilidad con navegadores

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