JavaScript – Dinamička izmena više slika

Iz sledećeg skripta videćemo kako možemo da izvršimo višestruku izmenu grafičkih elemenata, i to u slučaju dešavanja događaja „OnMouseOver“ nad jednom od slika. Ovaj efekat se često koristi kod kreiranja korisničkog interfejsa i navigacionih elemenata na stranici. Da bi ugradili ovu mogućnost u vaše stranice, dodajte sledeći kod unutar <HEAD> taga, i samo izmenite postojeće elemente (slika 0-2) sa vašim:


<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!–
// Ucitavanje slika
var slika0 = new Image();
slika0.src = "zamena.jpg";
var slika1 = new Image();
slika1.src = "3.jpg";
var slika2 = new Image();
slika2.src = "4.jpg";
//–>
</SCRIPT>
</HEAD>

Nakon ovoga, dodaćemo sledeći kod u telo HTML stranice, koji će da na događaj „onmouseover“ vezan za sliku „osetljiva.jpg“, izvršiti zamenu sve tri slike. Kada pokazivačem miša „skliznemo“ sa slike0, događaj „onmouseout“, vratiće se prvobitno stanje:


<BODY>
<a href="#"
onmouseover="slika0.src=’zamena.jpg’;
slika1.src=’3.jpg’; slika2.src=’4.jpg’;"
onmouseout="slika0.src=’osetljiva.jpg’;
slika1.src=’1.jpg’; slika2.src=’2.jpg’;">
<img name="slika0"
src="osetljiva.jpg">
</a>
<img name="slika1"
src="1.jpg" border="1">
<img name="slika2"
src="2.jpg" border="1">
</BODY>

Pratite Krstaricu na www.krstarica.com