Javascriptillä kuvan vaihto


Takaisin etusivulle | Takaisin oppaat sivulle | Mene loppuun

Esimerkki lopputuloksesta.

Kuvasarja
Edellinen kuva Seuraava kuva

Luo kolme eri kuvaa ja nimeä ne kuva1.png, kuva2.png ja kuva3.png.
Tallenna ne kuvat kansioon.

Tee HTML sivu ja laita siihen vaikka taulukko, jonka sisään laitat ensimmäisen kuvasarjan kuvatiedoston. esim. kuva1.jpg.
Laita kuvan ID:ksi kuvatsr.

Laita alla oleva koodi <head> </head> tagien väliin

<script type="text/javascript">
// Luodaan kuvista taulukko
var kuvat = new Array();
kuvat[0]="kuvat/kuva1.png";
kuvat[1]="kuvat/kuva2.png";
kuvat[2]="kuvat/kuva3.png";
var kuvatmaara = 0, kuvatloppu = 2-0;

//Funktio, jolla vaihdetaan kuvia painikkeiden avulla
function vaihdakuvat(sr) {
if (kuvatmaara+sr >= 0 && kuvatmaara+sr <= kuvatloppu) kuvatmaara += sr;
document.getElementById("kuvatsr").src=kuvat[kuvatmaara];
}
</script>

Seuraavaksi luo linkit jotka kuvaavat "Edellinen" ja "Seuraava".

Laita "edellinen" linkin osoitteeksi seuraava rivi:

javascript:vaihdakuvat(-1)

Laita "seuraava" linkin osoitteeksi seuraava rivi:

javascript:vaihdakuvat(+1)

Tallenna lopuksi HTML sivu.
Nyt voit testata ohjeen mukaisesti tehtyä HTML sivua, jonka tulisi toimia kuten ylläoleva esimerkkikin toimii.

Takaisin etusivulle | Takaisin oppaat sivulle | Palaa ylös

 

© 2010 - Petteri Hongisto