HTML <area> Tag

Definition og brug

<area> tags definerer områder inden for billedkortet (billedkort er billeder med klikbare områder, også kendt som klientpartitionssvarskort).

<area> elementer er altid indlejret i <map>-taggetinde.

Bemærk:<img> i usemap-attributten med <map>-elementet af navn-attributtenRelateret, opret forbindelse mellem billedet og kortet.

Se også:

HTML DOM-referencer:Area-objekt

Eksempel

Eksempel 1

Billedkort med klikbare områder:

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

Prøv det selv

Eksempel 2

En anden billedkort med klikbare områder:

<img src="solarsystem.png" width="1024" height="576" alt="Planets" usemap="#planetmap">

  <area shape="rect" coords="0,0,114,576" alt="Sol" href="sun.html">
  <area shape="circle" coords="190,230,5" alt="Merkur" href="mercury.html">
  <area shape="circle" coords="228,230,5" alt="Venus" href="venus.html">
</map>

Prøv det selv

Definerer alternativ tekst for området. Det er obligatorisk, hvis der findes en href-egenskab.
Definerer koordinaterne for området.
Definerer, hvad der skal downloades, når brugeren klikker på hyperlinket.
Definerer mål for hyperlinket i området.
Definerer sprogkoden for mål-URL'en.
Definerer det medie- eller enhed, der optimeres for mål-URL'en.
Definerer referencer, der skal sendes sammen med linket.
Definerer forholdet mellem det aktuelle dokument og mål-URL'en.
shape
  • default
  • rect
  • circle
  • poly
 Definerer formen på området.
target
  • Ramme navn
 Definerer hvor mål-URL'en åbnes.
type Medietype Definerer medietypen for mål-URL'en.

Globale egenskaber

<area> Tag understøtter også Globale egenskaber i HTML.

Eventegenskaber

<area> Tag understøtter også Eventegenskaber i HTML.

Standard CSS-indstillinger

De fleste browsere vil vise følgende standardværdier <area> Element:

area {
  display: none;
{}

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support