HTML <map> etikett

Definition och användning

<map> tagg för att definiera bildkartan. Bildkarta (image map, en typ av navigationskarta) är en bild med klickbara områden.

<map> elementet behöver en name-attributetdenna egenskap är knuten till <img>-elementet för usemap-attributet relaterade, som skapar ett förhållande mellan bild och karta.

<map> innehåller några <area>-elementet，definierar klickbara områden i bildkartor.

Se också:

HTML DOM referenshandbok:Kartobjekt

Exempel

Exempel 1

Bildkarta med klickbara områden:

<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 själv

Exempel 2

En annan bildkarta med klickbara områden:

<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 själv

Egenskap

Egenskap Värde Beskrivning
name Kartanamn Obligatorisk. Anger namnet på bildkartan.

Globala egenskaper

<map> Etiketterna stöder också Globala egenskaper i HTML.

händelseegenskaper

<map> Etiketterna stöder också Händelseegenskaper i HTML.

Standard CSS-inställningar

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

map {
  display: inline;
}

Webbläsarstöd

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