JavaScript – Kako kreirati „elektronsku galeriju“?

Predstaviฤ‡emo vam jedan od naฤina na kreirate „elektronsku galeriju“. Zapravo, radi se o tome da na stranici koja predstavlja „galeriju“ posetilac moลพe da menja slike (fotografije, crteลพe, grafike…) putem drop-down menija. Prvo ฤ‡emo vam prikazati kod, a zatim ฤ‡emo ga i objasniti. U zaglavlje stranice postavite sledeฤ‡i kod:


<SCRIPT LANGUAGE="JavaScript">
<!–
function MenjajSliku()
{
document.images.slike.src=document.galerija.slike.options[document.galerija.slike.selectedIndex].value
}
//–>
</SCRIPT>

Kada smo prethodni kod dodali u <HEAD> tag, sledi kod koji dodajemo u telo stranice (BODY):


<table cellspacing="0" cellpadding="0">
<td width="100%">
<form name="galerija">
<select name="slike" size="1" onChange="MenjajSliku()">
<option selected value="slika1.gif">Prva slika</option>
<option value="slika2.gif">Druga slika</option>
<option value="slika3.gif">Treca slika</option>
</select>
</form>
</td>
</tr>
<tr>
<td width="100%">
<p align="center">
<img src="slika1.gif" name="slike">
</td>
</tr>
</table>

ล ta se ovde deลกava? Kada korisnik klikne na dugme drop-down menija, otvara se lista sa odreฤ‘enim brojem opcija – slika (onoliko koliko vi dodate), u primeru smo naveli samo tri slike. Kada je posetilac kliknuo na odreฤ‘eni naziv slike, poziva se funkcija MenjajSliku, koja naziv slike (atribut IMG) menja sa nazivom slike ฤija se vrednost nalazi u value atributu, <OPTION> taga.

Skript smo postavili unutar male tabele, radi preglednosti. Na vama ostaje samo da pripremite tri (ili viลกe slika) i da ih linkujete unutar atributa „value“.

Pratite Krstaricu na www.krstarica.com