Javascriptillä kuvan vaihto

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.

2 comments

  1. Jep jep…

    Varmaan kannattaa opetella kirjoittamaan kieltä oikein ennen kun antaa ohjeita muille.
    Lisäksi tuo suomeksi kommentointi, muuttujien sekä funktioiden nimeäminen on varsin iljettävää.

    Harmi, että tämän tapaista tulee nähtyä päivittäin.

    1. No mikäs tuossa “kielessä” on nyt niin väärin, ettei sitä olisi kannattanut esittää?
      Toimiva scripti vieläkin.

      Tarkoituksenani ei ole kirjoittaa scriptejä tällä tavoin julkaistaviksi jotta ne olisivat suoraan copy/Pastella käyttöön otettavia jonka vuoksi funktioiden ja muuttujien nimet on tarkoituksellisesti tehty kuten on tehty nimenomaan kertomaan suomeksi mikä niiden merkitys on koodissa. Tiedän kyllä että se ei ole yleisen käytännön mukainen, mutta kuitenkin täysin toimiva ratkaisu.

Leave a Reply

Your email address will not be published. Required fields are marked *

*