Imagemap creat vizual cu GIMP

In unele cazuri este mai rapid sa faci o singura cerere catre server si sa descarci o singura imagine decit sa faci mai multe cerereri pentru imagini individuale, generind astfel mai multe conexiuni si o incarcare mai lenta a paginii. Atunci se foloseste image map, definindu-se zone dintr-o imagine si atribuindu-se acestora actiuni specifice, cum ar fi activarea unui link, descarcarea unui document, lansarea unui script. Un alt avantaj al folosirii image map este acela ca designul zonei respective este facut exclusiv grafic, fara HTML/CSS (atentie numai sa nu abuzati si sa realizati o pagina prea mare ca dimensiuni din cauza includerii multor imagini mari).

Efectiv este vorba de o lista de coordonate care definesc niste suprafete dintr-o imagine si actiunile (de obicei linkuri) atasate acestora. Tipurile de poligon care se pot folosi sint: cerc (cyrcle), drepthunghi (rectangle) si poly (poligon).

Pentru ca este destul de dificil de masurat si creat lista de coordonate, cel mai des sint folosite dreptunghiurile, dar cu ajutorul instrumentelor vizuale, ca cel prezentat aici, este foarte usor de definit o zona poligonala, doar cu interactiune din mouse.

GIMP furnizeaza un filtru numit evident ImageMap (Filters > Web > ImageMap...) din care se pot defini facil aceste suprafete, modifica nodurile, atasa linkuri si scripturi si salva ca HTML:

Este posibil chiar sa aveti si image maps care se intersecteaza, caz in care este importanta ordinea acestora pe axa Z, ordine care bineinteles poate fi stabilita din program.

In final rezultatul va arata si va functiona cam asa:

Poate cu alta ocazie voi reveni asupra subiectului, adincindu-l cu efecte roll-over care se pot adauga la un image map cu CSS sau JavaScript (nu este posibil doar cu HTML).