Kun linkki lisätään kuvaan Hypertext Markup Language (HTML) -kielellä, kyseinen linkki lisätään koko kuvaan. Tämä voi olla ongelma, jos ohjelmoija haluaa tehdä yhden kuvan, jossa on useita alueita tai painikkeita ja jokaista aluetta käytetään eri linkissä. HTML -kuvakartan avulla ohjelmoija voi määrittää tietyt alueet, joihin linkki menee, jolloin hän voi upottaa useita linkkejä yhteen kuvaan. Tämä tehdään määrittämällä linkin muoto ja kertomalla HTML -koodille, mitä koordinaatteja linkissä käytetään.
Internetissä käytetyt kuvat mitataan pikseleinä. Tietäen kuinka monta pikseliä kuvassa on ensimmäinen olennainen askel kuvakartan luomisessa. Esimerkiksi käytetään suorakulmaista kuvaa, jonka korkeus on 400 pikseliä ja leveys 250 pikseliä. Seuraavaksi ohjelmoijan on tiedettävä, kuinka mitata muoto tarkasti koordinaateissa, jotta HTML -kuvakartta toimisi oikein.
HTML -kuvakarttaa käytettäessä vasenta yläkulmaa kutsutaan 0,0. Oikea alakulma tässä tapauksessa olisi 250,400 10. Mittaukset tehdään ensin leveydellä ja sitten korkeudella. Helppo tapa ajatella sitä on se, että ensimmäinen mittaus kertoo HTML -koodille, kuinka pitkälle oikealle on mentävä vasemmasta reunasta, ja toinen on kuinka kertoa kuinka monta pikseliä alaspäin menee. Jos ohjelmoija haluaa, että piste kartalla on 50 pikseliä vasemmasta reunasta ja 10,50 pikseliä alaspäin, koordinaatit ovat XNUMX.
Ohjelmoija voi käyttää kolmea eri muotoa HTML -kuvakartalle: suora, ympyrä ja monikulmio. “Rect” tarkoittaa suorakulmiota, ja ohjelmoijan on ensin kirjoitettava vasemman yläkulman ja sitten oikean alakulman koordinaatit. Ympyrä määritetään kirjoittamalla koordinaatit, joista ympyrä alkaa, ja sitten ympyrän säde. Monikulmio luodaan kirjoittamalla kaikki viisi koordinaattia ylhäältä oikealle.
HTML -kuvakartan koodaus menee näin:
Jokaisella HTML -kuvakartalla on oltava nimi, ja “url.html” -osa on linkki, johon tämä kuvakartan osa johtaa käyttäjän, kun hän napsauttaa sitä. Kun kuva sijoitetaan verkkosivustolle HTML -koodilla, ohjelmoijan on kirjoitettava: usemap = ”test.” Tämä kertoo kuvalle, mitä HTML -kuvakarttaa käyttää.