Etiqueta HTML <area>

Definição e uso

<area> Tag que define a área do mapeamento de imagem (o mapeamento de imagem é uma imagem com áreas clicáveis, também conhecido como imagem de resposta de partitionamento do cliente).

<area> O elemento sempre está aninhado dentro Tag <map>interno.

Atenção:Elemento <img> dentro Atributo usemap com Elemento <map> do AtributoRelacionado, cria uma associação entre a imagem e o mapeamento.

Veja também:

Manual de Referência do DOM HTML:Objeto Área

Exemplo

Exemplo 1

Imagem mapeada com áreas clicáveis:

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

Experimente você mesmo

Exemplo 2

Outra imagem mapeada com áreas clicáveis:

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

Experimente você mesmo

Atributo

Atributo Valor Descrição
alt Texto Define o texto alternativo da área. É obrigatório se existir o atributo href.
coords Valores de coordenadas Define as coordenadas da área.
download Nome do arquivo Define o que será baixado ao clicar no link da área.
href URL Define o destino do link da área.
hreflang Código de idioma Define o idioma do URL de destino.
media Consulta de mídia Define o mídia/dispositivo otimizado para o URL de destino.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 Define as informações de referência a serem enviadas juntamente com o link.
rel
  • alternate
  • author
  • bookmark
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • prefetch
  • prev
  • search
  • tag
 Define a relação entre o documento atual e o URL de destino.
shape
  • default
  • rect
  • circle
  • poly
 Define a forma da área.
target
  • _blank
  • _parent
  • _self
  • _top
  • Nome do frame
 Define onde abrir o URL de destino.
type Tipo de mídia Define o tipo de mídia do URL de destino.

Atributos globais

<area> A tag também suporta Atributos globais no HTML.

Atributos de evento

<area> A tag também suporta Atributos de evento no HTML.

Configurações CSS padrão

A maioria dos navegadores exibirá os seguintes valores padrão <area> Elemento:

area {
  display: none;
{}

Suporte de navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte