JavaScript – Postepeno pojavljivanje slike

  –  

Efekat postepenog učitavanja slike vrlo lako možete izvesti uz pomoć Flash-a, ali moguće je isti efekat odraditi i uz pomoć dve „.gif“ slike, od kojih je jedna statična a druga poseduje dati efekt postepenog učitavanja. Mali problem predstavlja, kako dobiti suprotan efekat tj. iščezavanje slike kada se pokazivač pometi van „hotspot„-a. U sledećem primeru možete videti kako se uz pomoć JavaScript-a i par funkcija može dobiti ovaj efekt. Radi se o tome da treba da kreirate 5 do 6 slika, od koji svaka predstavlja jedan korak u učitavanju (iščezavanju) slike. Potom ćemo uz pomoć JavaScript funkcije odraditi da kada se pokazivač miša nađe iznad određene tačke (onmouseover), slike se izređaju od početne do krajnje (funkcija „ucitaj“) u određenom vremenskom periodu, i suprotno kada pokazivač „sklizne“ sa linka, vrši se prikaz jedne po jedne slike, ali u suprotnom redosledu. Evo i samog koda, koji treba da ubacite u prazan .html fajl, a koji ćete snimiti u isti folder sa 5 do 6 pripremljenih slika: 



<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!–

var brSlika = 6;

// uk.broj slika

var vremeFrejm = 125;

// vreme ucitavanja po frame-u

// u millisekundama;  125 = 125 ms


var tajmerUcit;

var tajmerIscit;

var UcitBrojac = 0;

var isctiBrojac = brSlika-1;

var nizSlika = new Array(brSlika);

// indeks prve slike je 0




nizSlika[0] = "slika00.jpg";

nizSlika[1] = "slika01.jpg";

nizSlika[2] = "slika02.jpg";

nizSlika[3] = "slika03.jpg";

nizSlika[4] = "slika04.jpg";

nizSlika[5] = "slika05.jpg";


for (var i = 0; i < brSlika; i++) {

eval(‘pic’ + i + ‘ = new Image();’);

eval(‘pic’ + i + ‘.src = nizSlika[i];’);

// ucitavanje slika potrebnih za animaciju

}


function ucitaj() {

clearTimeout(tajmerUcit);

document.images[‘slika’].src = nizSlika[UcitBrojac];

if (UcitBrojac != brSlika-1) {

UcitBrojac++;

tajmerUcit = setTimeout(‘ucitaj()’, vremeFrejm);

}

else {

clearTimeout(tajmerUcit);

UcitBrojac = 0;

   }

}

function iscitaj() {

clearTimeout(tajmerIscit);

document.images[‘slika’].src = nizSlika[isctiBrojac];

if (isctiBrojac != 0) {

isctiBrojac–;

tajmerIscit = setTimeout(‘iscitaj()’, vremeFrejm);

}

else {

clearTimeout(tajmerIscit);

isctiBrojac = brSlika-1;

   }

}

//–>

</script>

</HEAD>

<BODY>

<center>

<a href="link.com" onmouseover="ucitaj()"

onmouseout="iscitaj()">

<img name="slika" height=56 width=300 border=0

src="slika00.jpg"><br>

</center>

</BODY>

Pratite Krstaricu na www.krstarica.com