Valikko:

Interaktiivinen kuva

Listat-sivulle Linkit-sivulle Fontit-sivulle
Kuvaan voidaan määritellä alueita, joita painamalla pääsee toisille sivuille.



Viivan yllä oleva HTML-koodi on seuraava:
<h3 align=center>Interaktiivinen kuva</h3>

<map name="kartta"><!--kartan tiedot alkaa-->
    <area shape="rect" coords="5,37,66,94" href="listat.html" alt="Listat-sivulle" />
    <area shape="poly" coords="5,5 30,5 30,30" href="linkit.html" alt="Linkit-sivulle" />
    <area shape="circle" coords="155,30,25" href="fontit.html" alt="Fontit-sivulle" />
    <area shape="default" href="aktiivikuva.html" />
</map><!--kartan tiedot loppuu-->

<center>
Kuvaan voidaan määritellä alueita, joita painamalla pääsee toisille sivuille.

<br><img src="Kuvat/toveruus.gif" usemap="#kartta" border="0" /><br><br>

</center>

Img-elementissä näemme usemap-parametrin, joka viittaa yllä olevaan karttaa. Kartta muodostuu aluemäärityksistä, jotka on kirjoitettu area-tageihin. Area-tagin parametreihin tulee halutun aktiivisen alueen muoto shape, joka voi olla rect (suorakulmio), circle (ympyrä) tai poly (monikulmio). Lisäksi kuvalle määritellään oletusosoite. Oletusosoitteeseen viitataan, kun ollaan kuvan alueella ja ei olla minkään määritellyn alueen sisäpuolella (esimerkissä kolmas area-tagi viittaa sivuun itseensä).

Coords-parametri määrittelee aktiivisen alueen koordinaatit kuvan sisällä. Huomaa, että kuvassa origo on vasen yläkulma, X-akseli on siis kuvan yläreuna ja Y-akseli on kuvan vasen laita siten, että positiivinen suunta on alaspäin (X ja Y saavat vain positiivisia arvoja).

Alueiden ja koordinaattien muodot ovat alla.

rect coords="vasemman yläkulman X-koord , vasemman yläkulman Y-koord , oikean alakulman X-koord , oikean alakulman Y-koord"
circle coords="ympyrän keskipisteen X-koord , ympyrän keskipisteen Y-koord , ympyrän säde"
poly coords="1. pisteen X-koord , 1. pisteen Y-koord 2. pisteen X-koord , 2. pisteen Y-koord ...100. pisteen Y-koord"

Href-parametrin sisälle määritellään osoite, johon aktiivisella alueella klikkaamalla pääsee. Alt-parametri, kuten img-elementissä, avaa popup-ikkunan haluttuine teksteineen.