Ohjelmointi

| KOTISIVU | KURSSIKUVAUS | OHJELMA JA HARJOITUKSET |

JavaScript HTML sivulla: kuvilla leikkiminen

Harjoitus 3: Vaihtuvat kuvat

Jos haluat kokeilla miten kuva vaihtuu hiiren osoituksella, käytä seuraavanlaista skriptiä HTML-koodin sisällä. Siinä tehdään linkki, jossa kuva vaihtuu.

<a href="next.html" onmouseover="document.arrow.src='images/arrow_on.gif'" onmouseout="document.arrow.src='images/arrow_off.gif'">
<img src="images/arrow_off.gif" width="147" height="82" border="0" name="arrow" alt="arrow" />
</a>

Vastaavasti mielialasivu voisi näyttää seuraavanlaiselta (tarvitset tietysti myös kuvat). id="faceIm" on tunniste, jonka avulla painonapit löytävät kuvan paikan.

<body>
<div style="text-align:center ">
<h2> Oootko onnellinen? </h2>
<p>
<form>
<img id="faceIm" src="happy.gif" />
<p></p>
<input type="button" value="Iloinen"
onClick="document.getElementById('faceIm').src= 'happy.gif';
"/>

<input type="button" value="Murheissani"
onClick="document.getElementById('faceIm').src= 'sad.gif';
"/>

</form>

</body>
</html>

Hienostuneempia ja tehokkaampia tapoja toteuttaa tämä efekti löytyy sivuilta.

Kuvan vaihtamisen lyhyin väliajoin voit toteuttaa sijoittamalla kuvasarjan johonkin kansioon (tässä kuvat) ja nimeämällä ne numeroidusti kuva0.gif, kuva1.gif jne. yhteensä 10 kuvaa. Skripti poimii kuvat listaan (array). Kuvia vaihdellaan 800 millisekunnin välein Timer-olion avulla. Se kutsuu vaihtele() -funktiota, joka vaihtaa kuvan ja kutsuu jälleen itseään, kunnes timerID:lle lähetetään lopetuskäsky clearTimeout.

<body>
<h2> Kuvan vaihtelua </h2>
<p>
<img src="kuvat/kuva0.gif" />
<script>
var i, frame = 0;
var timerID;
var pics= new Array (10);

// ensin pitää muodostaa Image-olioiden lista
for (i=0; i < pics.length ; i++){
pics[i] = new Image();
}

//sijoitetaan kuvat tähän listaan eli haetaan ne palvelimelta
for (i=0; i < pics.length ; i++){
pics[i].src = "kuvat/kuva" + i + ".gif";
}

function vaihtele () {
document.images[0].src = pics [frame].src;
//images[0] viittaa sivun ensimmäiseen kuvapaikkaan
frame = (1 + frame) %pics.length;
//aloitetaan timerID uudelleen kutsumalla käsittelijää vaihtele()
timerID = setTimeout('vaihtele()', 800);
}
</script>

<form>
<input type="button" value="Aloita"
onClick="timerID = setTimeout ('vaihtele()', 30)"/>
<input type="button" value="Lopetus"
onClick="clearTimeout(timerID) "/>
</form>
</body>

Yllä document.images[0] viittaa sivun ensimmäiseen kuvapaikkaan, eli jos sivulla on useampi kuva, selain numeroi ne 0, 1, 2, jne.

Apua virheiden jäljitykseen

Koko sivun skripteineen voit validoida http://www.jslint.com/ sivulla.
Yleinen HTML validaattori erilaisin optioin on osoitteessa http://validator.w3.org/.

Muista myös Firefoxin Javascript error console.

| KOTISIVU | KURSSIKUVAUS | OHJELMA JA HARJOITUKSET |
Päivittänyt: Jaana Holvikivi
Muutettu 25.3.2010