Etichetta HTML <area>

Definizione e uso

<area> definisce l'area all'interno della mappa immagine (la mappa immagine è un'immagine con aree cliccabili, ovvero una mappa di risposta alle aree client).

<area> l'elemento è sempre contenuto all'interno di Tag <map>interno.

Attenzione:elemento <img> all'interno di proprietà usemap e elemento <map> del Proprietà nameCollegato, crea una relazione tra l'immagine e la mappa.

Vedi anche:

Manuale di riferimento HTML DOM:Oggetto Area

Esempio

Esempio 1

Mappa immagine con aree cliccabili:

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

Prova personalmente

Esempio 2

Un'immagine mappa con aree cliccabili:

<img src="solarsystem.png" width="1024" height="576" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,114,576" alt="Sun" href="sun.html">
  <area shape="circle" coords="190,230,5" alt="Mercury" href="mercury.html">
  <area shape="circle" coords="228,230,5" alt="Venus" href="venus.html">
</map>

Prova personalmente

Attributo

Attributo Valore Descrizione
alt Testo Stabilisce il testo alternativo dell'area. È obbligatorio se esiste l'attributo href.
coords Valore delle coordinate Stabilisce le coordinate dell'area.
download Nome del file Stabilisce il file da scaricare quando l'utente fa clic sul link.
href URL Stabilisce l'obiettivo del link dell'area.
hreflang Codice di lingua Stabilisce la lingua del URL di destinazione.
media Query di media Stabilisce il media / dispositivo ottimizzato per il URL di destinazione.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 Stabilisce le informazioni di riferimento da inviare insieme al link.
rel
  • alternate
  • author
  • bookmark
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • prefetch
  • prev
  • search
  • tag
 Stabilisce la relazione tra il documento corrente e il URL di destinazione.
shape
  • default
  • rect
  • circle
  • poly
 Stabilisce la forma dell'area.
target
  • _blank
  • _parent
  • _self
  • _top
  • Nome del frame
 Stabilisce dove aprire il URL di destinazione.
type Tipo di media Stabilisce il tipo di media del URL di destinazione.

Attributi globali

<area> Il tag supporta anche Attributi globali HTML.

Attributi degli eventi

<area> Il tag supporta anche Attributi degli eventi HTML.

Impostazioni CSS predefinite

La maggior parte dei browser utilizzerà i seguenti valori predefiniti per la visualizzazione <area> Elemento:

area {
  display: none;
{}

Supporto browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto