U trendu

JavaScript – Dinamička izmena više slika

Krstarica

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 i preko mobilne aplikacije za Android i iPhone.