Na internet stranicama često postoji potreba za zemljopisnom kartom države sa linkanim regijama ili oređenim dijelovima. Na taj način se posjetitelju na vizualan način prikazuju linkovi na zemljopisna područja, olakšava se navigacija i u konačnici rješenje izgleda atraktivnije.

U slučaju da postoji takva potreba uobičajena rješenja su koristila flash tehnologiju. Međutim takav pristup ima nekoliko nedostataka:

• Općeniti je stav da je Flash tehnolgija na zalasku jer nije kvalitetno podržana na svim uređajima (pritom su najvažniji iPhone i iPad)
• Za izradu flash rješenja morate angažirati flash developera za izradu rješenja kao i z anaknadne izmjene

Postoji li način da se slično rješenje implementira bez potrebe za Flash tehnologijom ili nekim drugim pluginom? Na sreću postoji, i nalazi se u html imagemap tagu (uz malu pomoć javascripta). Ogledni primjer možete vidjeti na Locusto aukcije stranicama gdje je ovo rješenje u upotrebi.

Imagemap je skupina <map> html tagova koji definiraju koordinate pravokutnika, kružnice ili nepravilnog poligona koj zatim mogu biti aktivni URL link. Na primjer, na slici možete označiti proizvoljni dio koordinatama na koji možete kliknuti. Ovaj tag je u posljednje vrijeme izgubio na svojoj važnosti, međutim uz upotrebu jQuery javascript biblioteke možemo postići atraktivnu aktivnu kartu poput one na gornjem primjeru. javascript je nužan jer <map> tag ne podržava hover i selected CSS svojstva tako da je nemoguće vizualno označiti map koji je odabarn ili nad kojim se nalazi pointer.

Da bi to postigli izrađena je karta Hrvatske kao pozadina, i zasebne slike koje sadrže samo pojedinačne županije koje se prikazuju promjenom z-indexa preko pozadinske karte Hrvatske. Gotovo korišteno rješenje zajedno sa svim pratećim bitmap slikama dostpuno je na stranicama Locusto aukcije. Slike je jednostavno modificirati sa nekim od grafičkih alata, međutim promjena dimenzija kompletne karte je nešto veći izazov, iako postoje i alati koji vam u tome mogu pomoći.

Sretno!