HTML <area>-tagg

Definition och användning

<area> taggar definierar områden inom bildkartor (bildkartor är bilder med klickbara områden, också kallade klientpartitionerings responsbilder).

<area> elementet är alltid inbäddat i <map>-tagginuti.

Observera:<img> i usemap-attribut och <map>-element s name-attributRelaterade, skapa en koppling mellan bild och kartor.

Se också:

HTML DOM referenshandbok:Area-objekt

Exempel

Exempel 1

Bild med klickbar region:

<img src="life.png" alt="Liv" 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="Kaffe" href="coffee.html">
</map>

Prova själv

Exempel 2

En annan bild med en klickbar region:

<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="Mercury" href="mercury.html">
  <area shape="circle" coords="228,230,5" alt="Venus" href="venus.html">
</map>

Prova själv

Egenskap

Egenskap Värde Beskrivning
alt Text Definierar alternativ text för området. Om href-egenskapen finns måste den vara nödvändig.
coords Koordinatvärden Definierar koordinaterna för området.
download Filnamn Definierar vad som ska laddas ner när användaren klickar på hyperlänken.
href URL Definierar målet för områdets hyperlänkar.
hreflang Språkkod Definierar språket för mål URL:en.
media Mediafrågor Definierar media/enhet optimering för mål URL:en.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 Definierar referensinformation som ska skickas tillsammans med länken.
rel
  • alternate
  • author
  • bookmark
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • prefetch
  • prev
  • search
  • tag
 Definierar förhållandet mellan aktuellt dokument och mål URL:en.
shape
  • default
  • rect
  • circle
  • poly
 Definierar formen på området.
target
  • Ramnamn
 Definierar var mål URL:en öppnas.
type Media-typ Definierar media-typen för måltillämpningen URL.

Globala egenskaper

<area> Taggar stöder också Globala egenskaper i HTML.

evenementegenskaper

<area> Taggar stöder också Evenementegenskaper i HTML.

Standard CSS-inställningar

De flesta webbläsare visar följande standardvärden <area> Element:

area {
  display: none;
{}

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd