U trendu

JavaScript – Kako kreirati „elektronsku galeriju“?

Krstarica

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