Siirry sivun sisältöön Avut CSS HTML JS Wp

AREA-elementti XHTML 1.0 Strict -dokumenttityypissä

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

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

• rect - Suorakulmainen alue, jolla määritellään neliöt ja suorakaiteet (oletusarvo).

• poly - Monikulmainen alue, jolla määritellään muut kulmikkaat alueet.

• circle - Ympyrä, sopii parhaiten pyöreiden alueiden määrittelemiseen.

• default - Koko kuva-alue, jolla viitataan ei-määriteltyihin alueisiin.

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:

• rect - Määritetään vasen yläkulma ja oikea alakulma, jolloin lukuarvoja on aina neljä (kaksi arvoparia): coords="vasen,ylä,oikea,ala".

• poly - Määritetään monikulmion kaikki kulmat järjestyksessä. Aloituskulman voi vapaasti valita, mutta ensimmäisen ja viimeisen arvoparin tulisi olla samat. Esimerkiksi viisikulmiossa olisi kuusi arvoparia: coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5,x1,y1".

• circle - Määritetään ympyrän keskipiste ja säde, jolloin lukuarvoja on aina kolme: coords="keskipiste-x,keskipiste-y,säde".

• default - Määritetään koko kuvan vasen yläkulma ja oikea alakulma. Esimerkiksi 300 × 200 -kuvapisteen kokoinen kuva: coords="0,0,300,200".

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: