HTML <area> shape-ominaisuus

HTML <area> -tagi

Määrittely ja käyttö

muoto Ominaisuus määrittää alueen muodon.

muoto Ominaisuus coords-ominaisuus Yhdessä määrittääkseen alueen koon, muodon ja sijainnin.

Esimerkki

Käytä shape-ominaisuutta määrittääksesi kuvakartassa jokaisen alueen muodon:

<map name="planetmap">
<area shape="rect" coords="0,0,114,576" href="sun.html" alt="Sun">
<area shape="circle" coords="190,230,5" href="mercur.html" alt="Mercury">
<area shape="circle" coords="228,230,5" href="venus.html" alt="Venus">
</map>

Kokeile itse

Syntaksi

<area shape="default|rect|circle|poly">

Ominaisuuden arvo

Arvo Kuvaus
default Määrittää koko alueen.
rect Määrittää suorakulmion alueen.
circle Määrittää ympyrän alueen.
poly Määrittää monikulmion alueen.

Yksityiskohtainen selitys:

muoto Ominaisuus määrittää kuvakartassa hiirenherkän alueen muodon:

  • Ympyrä (circ tai circle)
  • Monikulmio (poly tai polygon)
  • Suorakulmio (rect tai rectangle)

muoto Atribuutin arvo vaikuttaa siihen, miten selain tulkii coords-ominaisuutta. Jos ei käytetä muoto ominaisuus, niin oletetaan, että käytetään arvoa default. Standardin mukaan default tarkoittaa, että alue kattaa koko kuvan. Käytännössä selaimet käyttävät oletusarvoisesti suorakulmion aluetta ja odottavat löytävänsä neljä koordinaattiarvoa. Jos muotoa ei ole määritelty eikä elementissä ole neljää koordinaattiarvoa, selain voi jättää koko alueen huomiotta.

tunnistaa muoto Ominaisuuden default-arvon selaimet voivat tarjota alueen, joka kattaa kaikki kohdat, joita ei määritetty muiden kohdittain määritettyjen alueiden ulkopuolella. Koska alueet <map>-elementissä käytetään "ensin saapunut ensin" -järjestyksessä, kaikki oletusalueet on asetettava loppuun. Muuten oletusalue voi peittää kaikki muissa kuvamapeissa olevat alueet.

Selaimet eivät ole erityisen tiukkoja muodon nimien toteuttamisessa. Esimerkiksi, suorakulmion osalta Netscape 4 ei voi tunnistaa "rectangle", mutta se voi tunnistaa "rect". Tämän vuoksi suosittelemme käyttämään lyhennettyjä nimiä.

Selaimen tuki

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

HTML <area> -tagi