e-gradiva     HTML CSS JavaScript Načrtovanje    
  logotip  
SERŠ Maribor Iskanje Primeri

Zamenjava slik

Koda: 
<script type="text/javascript">
function menjaj_src(a)
  {
  document.images[3].src="slike/xfoto" + a + ".jpg"
  }
</script>

<img src="slike/xfoto0.jpgf" alt="menjaj!" />

<form action="akcija.html">
<input type="button" onclick="menjaj_src(1)"
value="Zamenjaj sliko!">
<input type="button" onclick="menjaj_src(2)"
value="Zamenjaj sliko!">
<input type="button" onclick="menjaj_src(3)"
value="Zamenjaj sliko!">
</form>
Izgled v
brskalniku:

menjaj!

Razlaga:

Če želimo na enem mestu prikazati več slik, lahko to storimo tako, da s klikom na gumb naložimo novo sliko namesto prejšnje. To lahko storimo najlažje z zamenjavo vira datoteke src. V podanem primeru so datotete poimenovane s številkami po vrsti, zato je mogoče ime datoteke sestaviti iz stalnega niza in številke slike: "slike/xfoto" + a + ".jpg". Pri takšnem sestavljanju niza je potrebno paziti na pravilno postavljene narekovaje in na kakšno piko.

V podanem primeru se poišče četrta slika v dokumentu document.images.[3]. V primeru, da se vstavi pred to sliko še kakšna, skript ne bo izvajal želene operacije, zato je bolje slike enolično pimenovati z id.

gor Gor     e-gradiva     JavaScript     Primeri     Slike

SERŠ Maribor : Strokovna gimnazija : 2004 : Davorin Lenart