<h3 align=center>Interaktiivinen kuva</h3> <map name="kartta"><!--kartan tiedot alkaa-->
<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" /> <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.