HTML <map> -elementti

Määrittely ja käyttö

<map> tagin määrittämään kuvakartan. Kuvakartta (image map, alueellinen navigointikartta) on kuva, jossa on klikattavia alueita.

<map> elementti tarvitsee name-ominaisuusjolla on <img> -elementti usemap-ominaisuus liittyviä, jotka luovat kuvan ja kartan välisen suhteen.

<map> sisältää muutamia <area> -elementti，määrittelee kuvakartan klikattavat alueet。

Katso myös:

HTML DOM -viittausoppikirja:Map-objekti

Esimerkki

Esimerkki 1

Kuva, jossa on klikattavia alueita:

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

Kokeile itse

Esimerkki 2

Toinen kuva, jossa on klikattavia alueita:

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

Kokeile itse

Ominaisuus

Ominaisuus Arvo Kuvaus
name Karttanimi Välttämätön. Määrittää kuvamappauksen nimi.

Globaalit ominaisuudet

<map> Tämä tagi tukee myös HTML:n globaalit ominaisuudet.

tapahtumavaiheet ominaisuudet

<map> Tämä tagi tukee myös HTML:n tapahtumavaiheet ominaisuudet.

Oletusarvoiset CSS-asetukset

Useimmat selaimet näyttävät seuraavat oletusarvot: <map> Elementti：

map {
  display: inline;
}

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki