Mapiranje slike

U HTML-u i XHTML-u, mapa slike je lista koordinata vezanih za određenu sliku, stvorena sa namerom da napravi veze od različitih oblasti slike ka različitim odrednicama (suprotno regularnim vezama ostvarenim preko slike, gde je cela oblast slike veza ka jednoj odrednici). Na primer, karta sveta može imati veze ka dodatnim informacijama o svakoj zemlji koja se nalazi na karti. Namena mapiranja slike je da obezbedi lak način povezivanja delova slike sa različitim odrednicama, bez potrebe za deljenjem slike u različite datoteke.

Mapiranje slike na serverskoj strani

Mapiranje slike na serverskoj strani je prvi podržavao Mosaic veb brauzer, verzije 1.1. Mapiranje slika na serverskoj strani omogućuje veb brauzeru da šalje informacije veb serveru o poziciji na kojoj je korisnik kliknuo na sliku. Ovo dozvoljava serveru da donese preciznu odluku o tome koji sadržaj će vratiti u odgovoru (mogući metodi su korišćenje slojeva maske određene slike, upite iz baze podataka ili konfiguracione datoteke koje se nalaze na serveru).

HTML kod za ovu vrstu mapiranja slike zahteva da <img> tag bude unutar <a>...</a> taga, kao i da <img> tag mora imati ismap atribut.

<a href="/imagemapper"><img src="image.gif" ismap/></a>

Kada korisnik klikne na sliku, brauzer će dodati X i Y koordinatu (računaju se u odnosu na gornji levi ugao slike) u veb adresu(URL) kao "upitnu nisku" i pristupiti rezultujućem URL-u. (na primer, /imagemapper?3,9)).

Ako brauzer ne podržava ismap, tada "upitna niska" neće biti dodata u URL i server bi trebalo da postupi odgovarajuće (na primer, vraćanjem tekstualne navigacione strane).

Mapiranje slike na klijentskoj strani

Mapiranje slike na klijentskoj strani predstavljeno je u HTML-u 3.2 i ne zahteva da se mapiranje slika izvršava na serveru (u potpunosti se izvršava na klijentskoj strani). Takođe, ne zahteva se ni JavaScript kod.

Pure HTML

Mapiranje slika na klijentskoj strani u HTML-u se sastoji iz dva dela:

1. Određena slika mora biti okružena <img> tagom koji mora imati usemap atribut. Atributom usemap se zadaje ime mape koju koristi konkretna slika (različite mape slika mogu postojati na jednoj stranici).
2. Elementi <area> se nalaze unutar <map> elementa. Svaki od <area> elemenata definiše jedinstvenu oblast na mapi slike na koju se može kliknuti (analogije radi, kao što se sa <a> tag elementom definiše koji URL treba biti otvoren za regularne veb veze). Atribut title može biti naveden, i služi da prikaže tooltip kada korisnik pređe kursorom preko naznačene oblasti. Navođenje alt atributa je često veoma bitno, a u nekim slučajecima i zakonska obaveza, jer se njime obezbeđuje da čitači ekrana (eng. screen reader) mogu pravilno interpretirati određenu vezu, što može biti od koristi, na primer, slepim ljudima.

Elementi <area> mogu biti pravougaonog (shape="rect"), poligonalnog (shape="poly") ili kružnog (shape="circle") oblika. Vrednosti oblika su parovi koordinata. Svaki par ima X i Y vrednost (računa se od levog gornjeg ugla slike), a vrednosti su razdvojene zarezom.

• Za pravougaonik se koriste četiri koordinate: x1, y1, x2, y2
• Za poligon se koristi onoliko koordinata koliko je neophodno za njegov opis: x1, y1, x2, y2, [...] xn, yn
• Za krug se koristi jedan par koordinata za opis centra, i vrednost poluprečnika: x1, y1, r (radijus)

Sledeći primer definiše pravougaonu oblast (9,372,66,397). Kada korisnik klikne bilo gde unutar oblasti, biće preusmeren na Vikipedijinu početnu stranicu.

<img src="image.png" alt="Website map" usemap="#mapname" />
<map name="mapname">
  <area shape="rect" coords="9,372,66,397" href="http://en.wikipedia.org/" alt="Wikipedia" title="Wikipedia" >
</map>

CSS

Moderniji pristup je preklapanje veza, koje se nalaze na slici, korišćenjem CSS svojstva za apsolutno pozicioniranje. Međutim, ovakav pristup podržava samo pravougaone oblasti, ali može biti pogodan za izradu mapa za iPhone uređaje, gde se javlja problem prilikom skaliranja mapa izrađenih u Pure HTML-u.

Upotreba tehnika mapiranja slika

Primer mapiranja slike Klub (trpezarija kluba). Klikom na osobu sa slike učitava se odgovarajuća stranica sa člankom o toj osobi.

Moguće je ručno mapiranje slike na klijentskoj strani korišćenjem tekstualnog editora, ali to zahteva da veb dizajneri znaju kako treba kodirati HTML, kao i kako enumerisati koordinate oblasti koje žele da postave na sliku. Kao rezultat, većina mapa slika koje su implementirane ručno predstavljaju jednostavne poligone.

Zbog toga što pravljenje mapa slika u tekstualnom editoru zahteva mnogo vremena i truda, mnoge aplikacije su dizajnirane da dozvole veb dizajnerima da naprave mape slika brzo i jednostavno. Neke od tih aplikacija su Adobe Dreamweaver ili KImageMapEditor (za KDE), i "imagemap" dodatak za GIMP.

Tutorijali i veb linkovi

• CSS Image Map Techniques and Tutorials Tutorial Design Reviver
• Imagemap Generator, Generator for HTML Imagemaps