[es] - Kako da se slika promeni kad se predje preko nje?

Seslak
Sinisa Seslak
Doboj, Republika Srpska

Član broj: 19885
Poruke: 223

Sajt: www.seslak.tk

Profil

Kako da se slika promeni kad se predje preko nje?

^{11.01.2009. u 19:02 - pre 186 meseci}

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.

Parental Advisory

Odgovor na temu

sojic
Dalibor Sojic
Makedonija

Član broj: 7051
Poruke: 796
77.28.139.*

Sajt: right-sock.net

+1 Profil

Re: Kako da se slika promeni kad se predje preko nje?

^{12.01.2009. u 10:13 - pre 186 meseci}

Ja bih to izveo sa CSS.

Trenutno ne mogu detalje, ali ubrzo pisacu detalje.

routing protocols enable routers to route routed protocols!

Odgovor na temu

Nikola Poša
Backend (PHP) developer
Beograd

Član broj: 173839
Poruke: 1616
*.adsl-a-1.sezampro.yu.

+33 Profil

Re: Kako da se slika promeni kad se predje preko nje?

^{12.01.2009. u 21:36 - pre 186 meseci}

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

Odgovor na temu

Seslak
Sinisa Seslak
Doboj, Republika Srpska

Član broj: 19885
Poruke: 223

Sajt: www.seslak.tk

Profil

Re: Kako da se slika promeni kad se predje preko nje?

^{13.01.2009. u 03:11 - pre 186 meseci}

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.

Parental Advisory

Odgovor na temu

Nikola Poša
Backend (PHP) developer
Beograd

Član broj: 173839
Poruke: 1616
*.adsl-a-1.sezampro.yu.

+33 Profil

Re: Kako da se slika promeni kad se predje preko nje?

^{13.01.2009. u 16:12 - pre 186 meseci}

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.

Odgovor na temu

Aleksandar Klickovic
Owner
Daedalus Outsourcing
Beograd

Član broj: 204183
Poruke: 344
93.86.201.*

Sajt: petsq.me

+67 Profil

Re: Kako da se slika promeni kad se predje preko nje?

^{13.01.2009. u 20:19 - pre 186 meseci}

Zar nije lakse iseci sliku u fotoshopu i odraditi obican image rolower..

Daedalus Outsourcing | Web Development | SEO | Instagram Followers - http://daedalus.co.rs

Odgovor na temu

Seslak
Sinisa Seslak
Doboj, Republika Srpska

Član broj: 19885
Poruke: 223

Sajt: www.seslak.tk

Profil

Re: Kako da se slika promeni kad se predje preko nje?

^{14.01.2009. u 08:25 - pre 186 meseci}

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.

Parental Advisory

Odgovor na temu