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:
Mapiranje slike i "hover" efekti
messi iniesta xavi

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 -
fcbarselona

 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.


Mapiranje slike i "hover" efekti - Image Map

Mapiranje slike i "hover" efekti - Image Map


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"  /&gt;



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 = new Array();
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';
return false;
}
</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.

14 comments:

  1. svaka cast odlican tut mislim da ce posluziti mnogima.. :)

    ReplyDelete
  2. Ovo izgleda fenomenalno, svaka cast....:D

    ReplyDelete
  3. pozdrav!
    prije svega, hvala na tutorialu, zaista je zanimljiv.

    jedno pitanje. uradio sam sve kako treba i radi. samo mi sporo učitava.
    kada otvorim u chrome-u, prvo mi otvori kao neispravnu sliku, pa tek onda nakon 4-5 sekundi (kad već pomislim da ne radi), učita ispravno.

    u čemu je problem? da li to inače tako treba, ili je problem u nečemu drugom?
    želio bih izraditi jednu sličnu mapu za svoju stranicu, ali ne želim da tako sporo učitava.

    pozdrav i sve najbolje u daljem radu!

    ReplyDelete
    Replies
    1. Pozdrav i hvala na lijepim riječima.

      Nebi trebalo da sporo učitava. Ako probu na chrome-u radiš na kompjuteru trebalo bi momentalno da učitava a ako radis na serveru onda zavisi od slika, kolike su i da li su optimizovane za web. Sam javascript kod iz ovog primjera nije zahtjevan i nije do njega sigurno.

      Znači problem može biti do veličine slika ili da nisi sve uradio pravilno. Da li si ubacio sve slike?
      Pregledaj ovaj zadnji dio koda document.r1.src='barselona.jpg'; , to je pozadinska slika koja se prva učitava.

      Delete
    2. Pozdrav opet.

      Evo upravo sam pogledao ponovo i tek sam sad shvatio da mi otvori kao neispravnu sliku i tako stoji cijelo vrijeme sve dok mišem ne pređem preko slike.
      Znači cjelo vrijeme stoji kao neispravna slika, ali čim mišom pređem preko slike, pojavi se ispravno istog momenta. Isto mi radi i u mozzili.
      Ipak znači momentalno učitava, problem je u nečemu drugom.
      Ne znam do čega je, možda probam ponovo uraditi.

      Delete
    3. Vjerovatno neki od koraka nisi uradio dobro. Probaj ponovo.

      Delete
  4. lepo je,samo kada udjem u blur i to dalje meni sve radi za Messi tekst a ne za njega

    ReplyDelete
  5. a onda neće da mi pomera da zamutim ostale a ne Messi-a

    ReplyDelete
    Replies
    1. Pogledaj treći korak, malo sam dopunio uputstvo. Treba sloj sa tekstom da zalijepiš na sliku ispod. Desni klik na layer sa tekstom pa Merge Down. I onda uradi blur.

      Delete
  6. Ovo izgleda sjajno, ali kada ja radim nešto ne štima..... postoji li video na youtube koji ovo objašnjava? :D

    ReplyDelete
    Replies
    1. Nažalost nema, nisam radio video.

      Delete
  7. Odlicno i pedantno objasnjeno! Svaka cast!
    Imao bih dodatno pitanje. Kako sad da ubacimo ovaj mapirani html na stranu sajta tj. da bude mapirana fotografija kao sto je ovde kod vas? WordPress je u pitanju.

    ReplyDelete

| Gimp Tutorial | Privacy Policy | Kontakt

Back to TOP   |