Imagemap toiminto

Imagemap toiminnolla voidaan kuvaan tehdä "kosketusherkkiä" alueita, joita napauttamalla voidaan esim. siirtyä toiselle sivulle. Tämä oli toiminnon perinteinen tarkoitus, mutta nykyisin sitä käytetään usein yhdessä jonkin ohjelmointikielen kanssa. Näin esim. hiiren vieminen kuvan päälle voi avata suurennoksen ko. kohdasta tms.

Imagemap komentoa varten tarvitaan kuva, joka liitetään muuten kuin tavallinen kuva, mutta siiten lisätään usemap -määrite.

<img src="kuva.jpg" width="600" height="400" alt="Kuvassa Kuntola" usemap="#kuntola">

Sen jälkeen tehdään erillinen karttatiedosto, joka aloitetaan komennolla <map>. Tämän jälkeen määritetään alueet area shape -komennoilla. Muoto voi olla rect (suorakaide), circle (ympyrä) tai poly (monikulmio). Komento voisi olla esim (kommentit punaisella):

<map name="kuntola"> - sama nimi kuin kuvan yhteydessä
<area shape="rect" coords="10,10,200,200" href="toinensivu.html" alt="Toiselle sivulle">
<area shape="circle" coords="300,300,50" href="kolmassivu.html" alt="Kolmannelle sivulle">
<area shape="poly" coords="400,400,430,430,500,500" href= "neljassivu.html" alt="Neljännelle sivulle"
</map> - komento pitää myös päättää

Rect coords -komennossa ensimmäiset kaksi arvoa ovat suorakaiteen vasemman yläkulman sijainti ja viimeiset kaksi oikean alakulman sijainti. Circle coords -komennossa kaksi ensimmäistä arvoa ovat ympyrän keskipisteen sijainti ja kolmas arvo ympyrän säde. Poly coords -komennossa aina kaksi peräkkäistä arvoa muodostavat yhden pisteen sijannin. Esim. kuusikulmiossa on siis 2 x 6 arvoa eli 12 arvoa.

Katso tästä video imagemapin määrityksestä.