Siirry sivun sisältöön Avut CSS HTML JavaScript Kotisivu

AREA-elementti XHTML 1.0 Strict -dokumenttityypissä

AREA-elementillä merkitään kuvakartta-alueet.

Merkkaus: <area alt="..." />
Sallittu sijainti: map
Sallittu sisältö: sisällötön
Attribuutit: alt | coords | href | kohdistusattribuutit | nohref | shape | yleiset attribuutit

AREA-elementin attribuutit

SHAPE- ja COORDS -attribuutit yhdessä määrittelevät kuvakartan kuuman alueen (hot spot).

SHAPE-attribuutilla määritellään kuva-alueen muoto. Attribuutin mahdollisia arvoja on neljä:

COORDS-attribuutilla ilmoitetaan kunkin muodon koordinaatit, eli mistä kyseinen alue alkaa ja mihin se loppuu. Koordinaatit lasketaan suhteessa kuvan vasempaan ylänurkkaan. Attribuutin arvoksi annetaan pilkulla erotettuja lukuja (lengths), joiden arvot ja määrä riippuu määritetystä muodosta:

Pakollisella ALT-attribuutilla määritellään alueelle vaihtoehtoinen teksti, kuten IMG-elementissäkin.

HREF-attribuutilla määritetään hypertekstiviittauksen kohde, kuten A-elementissäkin. NOHREF-attribuutilla (nohref="nohref") taas määritetään alue, josta ei tahdota linkittää mihinkään. Ristiriitaiset aluemääritykset ratkaistaan siten, että ensin koodissa määritetty kumoaa jälkimmäisen.

Kohdistusattribuutit

AREA-elementti hyväksyy myös kaikki kohdistusattribuutit, joita käsitellään omalla sivullaan.

Esimerkki

Esimerkkikoodi IMG-, MAP- ja AREA -elementtiyhdistelmällä toteutetusta kuvakartasta:

<div>
<img
 src="../misc/kartta.gif"
 alt="Kuvakartan alueita havainnollistava kuva."
 width="300"
 height="200"
 style="border:1px blue dotted"
 usemap="#kk-testi" />

<map name="kk-testi" id="kk-testi">
<!--Ensimmäinen alue määrittelee otsikkotekstin
 "kylmäksi kohdaksi." -->
<area shape="rect"
 coords="50,20,236,32"
 nohref="nohref"
 alt="Hakukoneet:" />
<area
 shape="rect"
 coords="17,53,193,95"
 href="javascript:alert('Infoseek')"
 alt="Infoa Infoseekistä" />
<area
 shape="poly"
 coords="18,172,109,104,135,152"
 href="javascript:alert('Lycos')"
 alt="Löytöjä Lycosista" />
<area
 shape="circle"
 coords="240,140,50"
 href="javascript:alert('Exite')"
 alt="Etsi Exitesta" />
<area
 shape="default"
 coords="0,0,300,200"
 href="javascript:alert('Tämä on oletusalue!')"
 alt="Oletusalue" />
</map>
</div>

Esimerkkikoodimme tulostuu dokumenttiin seuraavasti:

Kuvakartan alueita havainnollistava kuva. Hakukoneet: Infoa Infoseekistä Löytöjä Lycosista Etsi Exitesta Oletusalue
Referenssin käyttöliittymät:
laaja | rakenteellinen | suppea

Kaikki XHTML1 Strict -elementit