[ Seslak @ 11.01.2009. 19:02 ] @
Dakle, treba da mi se slika promeni kad se predje misem preko nje ali uz jedan detalj. Kad se predje preko jednog dela slike (recimo levog) da se promeni u jednu a kad se predje preko drugog dela (recimo desnog) u neku drugu. Znam da to moze, samo mi treba vasa pomoc ;)

Hvala.
[ sojic @ 12.01.2009. 10:13 ] @
Ja bih to izveo sa CSS.

Trenutno ne mogu detalje, ali ubrzo pisacu detalje.
[ Nikola Poša @ 12.01.2009. 21:36 ] @
To ne mozhe samo sa CSS-om, jer mogucnost CSS-a za takve stvari se ogranichava samo na ono njegovo svojstvo hover.

Za takav "zahvat" potrebno je angazhovati JavaScript, i to uopshte nije tako jednostavno. Postoje dva nachina...

Prvi je nekako vishe "hack-ovanje" nego programiranje, al' shto da ne. :) Naime, mogao bi da tu sliku da podelish na dva dela (levi i desni), a u kodu bi ih uchitavao jednu do druge, tako da se stvori utisak da se radi o jednoj slici (to podrazumevam da znash kako se radi). Ta slika, odnosno ta dva dela treba da se nalaze unutar nekog div-a koji ima neki id, npr. id = "slika". Svakoj slici bi dodelio dogadjaj onmouseover, koji bi pozivao neku javascript f-ju, koja se recimo zove promena_slike(), i njoj bi se takodje prosledjivao neki jedinstveni podatak, da bi se znalo o kom delu slike se radi (levom ili desnom). Neka to bude recimo obichan broj, pa bi tako za prvu sliku poziv izgledao ovako onmouseover = "promena_slike(1);", a za drugu onmouseover = "promena_slike(2);". Ta funkcija bi se svodila samo na to da se u tom div-u uchita cela slika, odnosno, ovako neshto:
Code:

function promena_slike(deo) {
   if (deo == 1) { //ako je korisnik preshao mishem preko prvog dela
      document.getElementById('slika') = '<img src = "nekaSlika1.jpg" />';
   }
   else if (deo == 2) { //ako je korisnik preshao mishem preko drugog dela
      document.getElementById('slika') = '<img src = "nekaSlika2.jpg" />';
   }
}


Drugi nachin je dosta komplikovaniji, i on se svodi na to da se opet na taj dogadjaj onmouseover poziva neka f-ja koja ce na osnovu pozicije slike i njene shirine (ili visine), kao i trenutne pozicije kursora misha u trenutku prelaska preko slike da uchitava slike u taj div...
[ Seslak @ 13.01.2009. 03:11 ] @
Prvi nacin koji si objasnio mi je vec bio na pameti i nakon sto sam odustao od vase pomoci (posto u prvih 12 sati nije bilo posta) tako samo to i uradio. Zapravo, posto se radi o slici sa 5 zona preko kojih se prelazi isekao sam je na komade i napravio identicnu tabelu a zatim sve to pouklapao u tabelu i napravio ostatak nesto slicno onome sto si ti napisao. Detalji...

I dalje bih vise volio ovaj drugi deo sa koordinatama ali nisam siguran kako bez vasih uputstava pa bi mi pojasnjenje tog dela oko hovera za koordinate dobro doslo.

Hvala.
[ Nikola Poša @ 13.01.2009. 16:12 ] @
Teshko je to objasniti ovako u poruci... Ali uglavnom, ti u JavaScript-u pomocu f-ja offsetLeft i offsetTop, mozhesh da dobijesh koordinate gornjeg levog ugla nekog objekta (slike, div-a...). Kad znash te koordinate, onda mozhesh da pitash npr. ako se kursor trenutno nalazi u x + 70 i u y + 40, promeni sliku. Ovo x i y su te vrednosti dobijene gore pomenutim funkcijama, a te cifre 70 i 40 predstavljaju piksele. E sad, ti josh treba da odredish i koordinate kursora, a za to je najbolje da malo konsultujesh Google ("get mouse position javascript", ili tako neshto)...

edit: Sad sam se setio, u okviru jquery-ja postoje razne cake koja olakshavaju taj postupak, mozhesh da ih pogledash ovde.
[ Aleksandar Klickovic @ 13.01.2009. 20:19 ] @
Zar nije lakse iseci sliku u fotoshopu i odraditi obican image rolower..
[ Seslak @ 14.01.2009. 08:25 ] @
aleksandre, where's fun in all of that? :)

nikola, hvala puno. pogledacu ovo. ako neko ima jos neku ideju neka nabaci. bilo bi dobro kad bi neko ima working example.