Johdatus kuvakarttoihin

Kun verkkosivulla olevaan kuvaan halutaan lisätä interaktiomahdollisuus, jossa kuvasta klikkaamalla päästään toiselle sivulle, on siitä luotava kuvakartta. Tämä onnistuu määrittelemällä html-dokumenttiin kuvasta linkiksi rajattava alue ja antamalla tälle linkille sitten haluttu osoite.

Tämä sivusto on lyhyt opastus siihen, miten voit itse tehdä sivullesi haluamaasi kuvaan kuvakartan. Opastus etenee vaihe vaiheelta ja jokaisen vaiheen alapuolella on esimerkkikoodi siitä, miltä oma html-koodisi tulisi näyttää. Tähän tyyliin:

Tähän tulee esimerkkikoodia, kuten
<map name="kartta1">

Esimerkkikoodia täydennetään sitä mukaa kun vaiheissa edetään, eli voit aina verrata omaa koodiasi sen vaiheen lopussa olevaan koodiin, missä olet menossa.

Seuraavissa esimerkeissä käytetään täältä löytyvää kuvaa, jossa on monia erilaisia muotoja jotka sopivat kuvakarttojen tekemisen harjoitteluun. Muutakin kuvaa voi toki käyttää, mutta käyttämällä samaa kuvaa voit varmistua siitä, että lopputulos on toivotunlainen.

Aloitetaan!