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...
Kako da se slika promeni kad se predje preko nje?
11.01.2009. u 19:02 · pre 216 meseci
#1