Mapiranje slike i hover efekti - Image Map

U ovom uputstvu ću vam pokazati kako napraviti mapu na slici. Ukratko - u jednoj slici obilježiti više područja koja vode na različite lokacije ili pokazuju različite efekte kad se pređe mišem preko njih. Na ovaj način moguće je uz pomoć javascript-a  izvesti razne rollover, hover efekte, promjenu slike, ispis teksta, napraviti navigaciju zaa sajt  i slično. U ovom tutorialu koristićemo jedan jednostaviji javascript kod i osnove html-a.

Pogledajte gotov primjer i pređite mišem preko igrača:

---

1. Za ovaj primjer koristićemo sliku tri igrača Barselone. Potrebno je da od original slike napravimo još tri za svakog igrača sa njegovim imenom koje će se smjenjivati prelaskom miša preko igrača. Znači koristićemo četiri slike.

---

2. Otvorite GIMP i ubacite glavnu sliku. Možete preuzeti ovu -

---

 3. Duplirajte ovaj layer, daberite "Text Tool" i napišite text "Messi" na prvom igraču".
     Desni klik na layer sa tekstom koji ste napisali pa Merge Down da spojite duplirani layer i tekst u  jedan sloj .

---

4. Selektujte "Free Select Tool" (laso) i klikovima tačkajte oko Mesija da bi dobili selekciju oko igrača (isprekidanu liniju). Nakon toga u meniju idite na "Select > Invert".

Sledeći potez je "Filters > Blur > Gausian Blur" , podešavanja ostavite kakva jesu i kliknite na "OK".
Ovim potezom smo zamutili sve na slici osim Mesija. Sačuvajte ovu sliku kao messi.jpg na  desktop. "File - Save". Rezultat bi trebao biti sledeći :

Treći i četvrti korak ponovite i sa ostala dva igrača. Duplirate prvu sliku, dodate joj tekst, uradite Gaussian Blur isačuvate slike pod drugim imenom.

---

5. Sad ćemo da označimo mapu na slici. U meniju idite na "Filters > Web >Image Map"

Otvoriće vam se novi prozor u kojem ćete s lijeve strane odabati "Define Polygon Area" i počnite klikovima da označavate konturu oko Mesija. Kad završite obilježavanje kliknite dva puta na završnoj tački. Dobićete zelenu isprekidanu liniju oko Mesija i ujedno će vam iskočiti pop-up prozor u kojoj ćemo unijeti neke komande koje su potrebne da bi mapa funkcionisala.

Pod tabom "Link" u polje URL možete unijeti web adresu na koju će voditi klik na ovom dijelu slike koji smo označili.

U istom prozoru kliknite na tab "JavaScript" i u polje "onMouseover:" upišite RollOver(1); a u polje "onMouseout:" upišite resetSrc(); , kliknite "OK" i ne zatvarajte ImageMap prozor.

Nakon toga opet nacrtajte mapu na drugom i trećem igraču, samo ovaj put u polje "onMouseover:" upišite RollOver(2); na drugom a na trećem RollOver(3);

---

6. Idite na "Save" i u polju "Name" pisaće vam na primjer barselona.jpg.map . Umjesto map napišite html.
Primjer - barselona.jpg.html. Sačuvajte dokument na desktop gdje se nalaze i ostale slike koje ste napravili.

---

7. Sad taj html fajl otvorite sa nekim tekst editorom. Može Notepad, Notepad++, Wordpad, ili dizajnerski programi Dreamweaver, Frontpage ili slično.

Kod će izgledati kao na slici -

Pronađite liniju koda

<img src="barselona.jpg" width="450" height="338" border="0"
      usemap="#map"  />

i na kraju dodajte name="r1".

<img src="barselona.jpg" width="450" height="338" border="0"
      usemap="#map" name="r1" />

;

---

8. Da bi ovo sve radilo potrebno je dodati javascript kod koji će pokretati ovu funkciju. Dio obojen crvenim slovima treba da zamjenite nazivima vaših slika. Kopirajte kod i nalijepite ga u html iznad ostalog koda mape. Kod je sledeći :

<script>
if (document.images) {
  var ImgOver = [];
  ImgOver[1] = new Image();
  ImgOver[2] = new Image();
  ImgOver[3] = new Image();

  ImgOver[1].src = "messi.jpg";
  ImgOver[2].src = "iniesta.jpg";
  ImgOver[3].src = "xavi.jpg";
}

function RollOver(i) {
  document.r1.src = ImgOver[i].src;
}

function resetSrc() {
  document.r1.src = "barselona.jpg";
}
</script>

---

9. Otvorite html fajl u nekom od pretraživača, IE, Firefox, Chrome, Opera i isprobajte da li radi. Ako ste sve uradili ispravno imaćete efekte kao na slici s početka tutoriala.

Pošto ovaj postupak nije lako objasniti pisanim putem, uskoro ću napraviti i video uputstvo kako bi tutorial bio što jasniji.