HTML <img> usemap -ominaisuus

HTML <img> - kuva

Määrittely ja käyttö

usemap Ominaisuus määrittää kuvan asiakaskäyttöisen kuvamappaukseksi.

Kuvamappaus tarkoittaa kuvaa, jossa on klikattavia alueita.

usemap Ominaisuudet liittyvät <map> -elementti name tai id -ominaisuus on yhdistetty, jotta voidaan luoda <img> ja <map> -elementtien välinen yhteys.

Huomaa:Jos <img> -elementti on <a> tai <button> -elementin jälkeläinen, sitä ei voida käyttää usemap Ominaisuudet.

Lue lisää: usemap-ominaisuuden selitys

Esimerkki

Klikattavat alueet sisältävät kuvamappauksen:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="Computer" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="Phone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Cup of coffee" href="coffee.html">
</map>

Kokeile itse

Syntaksi

<img usemap="#mapname">

Ominaisuusarvo

Arvo Kuvaus
#mapname Neliömerkki ("#") ja halutun <map>-elementin nimi.

Lue lisää: usemap-ominaisuuden selitys

usemap Ominaisuudet tarjoavat "asiakaskeskeisen" kuvamappausmekanismin, joka poistaa tehokkaasti palvelinpuolen hiiren koordinaattien käsittelyn sekä siihen liittyvät verkkovälimatkat. Erityisten <map> ja <area>-tagien avulla HTML-luoja voi tarjota kuvamappauksen, joka kuvaa usemap-kuvassa olevien linkittyvien alueiden koordinaatteja, ja joka sisältää vastaavat linkkien URL-osoitteet. Usemap-ominaisuuden arvo on URL, joka osoittaa erityiseen <map>-alueeseen. Käyttäjän tietokoneen selain muuntaa kuvassa napsautuksen koordinaatit tiettyyn toimintaan, mukaan lukien toisen asiakirjan lataaminen ja näyttäminen.

Esimerkiksi selitämme, seuraava lähdekoodi karttaa 100x100 pikselin kuvan "map.gif" neljään alueeseen, ja kun käyttäjä napsauttaa jokin näistä alueista, hän siirtyy eri asiakirjaan. Huomaa, että tässä <img>-tagissa olemme tehokkaasti sisällyttäneet ismap-kuvamapauksen käsittelyn, jotta ne käyttäjät, joilla ei ole usemap-käsittelyominaisuutta, voivat käsitellä kuvamappeja toisella tavalla, nimittäin palvelinvaiheessa:

<a href="/example/map">
  <img src="/i/map.gif" ismap="ismap" usemap="#map" />
</a>
<map name="map">
  <area coords="0,0,49,49" href="link1.html">
  <area coords="50,0,99,49" href="link2.html">
  <area coords="0,50,49,99" href="link3.html">
  <area coords="50,50,99,99" href="link4.html">
</map>

Iスマap- ja usemap-ominaisuuksien käyttö ero

Kartta on hyvä esimerkki ismap- ja usemap-ominaisuuksien käytöstä, esimerkiksi, kun selataan suurkonsernin verkkosivuja ympäri maata, käyttäjä saattaa napsauttaa kartalla asuinpaikkakunnansa, jotta hän voi saada lähialueen vähittäismyymälöiden osoitteet ja puhelinnumerot.

Usemap-ominaisuuden hyödyt asiakaspuolen käsittelyssä ovat, että se ei vaadi palvelinta tai erityistä palvelinohjelmistoa, toisin kuin ismap-mekanismi, ja sitä voidaan käyttää ei-web-ympäristöissä, kuten paikallisissa tiedostoissa tai CD-ROMissa.

Selaimen tuki

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

HTML <img> - kuva