Tulos

Klikkaus tämän elementin päällä palauttaa kuvat alkutilaan.

Koodi

Tämä tulee HEAD-osastoon

<script type="text/javascript">
/* Käytettävien kuvien esilatausosuus alkaa. */

var neKuvat = [];//kuvataulukon luonti

// Kerrotaan esiladattavien kuvien määrä ja sijainti:
neKuvat[0] = '../kuvat/city.gif';
neKuvat[1] = '../kuvat/koti1.gif';
neKuvat[2] = '../kuvat/koti2.gif';
neKuvat[3] = '../kuvat/koti3.gif';

var lataus = [];
 for (var i=0;i<neKuvat.length;i+=1) {
  lataus[i] = new Image();
  lataus[i].src = neKuvat[i];
 }

/* Esilatausosuus loppuu. */

function vaihdaKuva(nimi,polku) {
 if (document.images) {
  document.images[nimi].src=polku;
 }
}
</script>

Tämä tulee BODY-osastoon

<ul>
<li>Kuva vaihtuu kun osoitin kuvan päälle:
 <img
 name="kuva1"
 src="../kuvat/city.gif"
 width="70"
 height="70"
 align="middle"
 alt="1. esimerkki."
 title="1. esimerkki."
 onmouseover="vaihdaKuva('kuva1','../kuvat/koti1.gif')" /></li>

<li>Kuva vaihtuu kun osoitin kuvan päälle
 ja palautuu kun osoitin siirretään pois:
 <img
 name="kuva2"
 src="../kuvat/city.gif"
 width="70"
 height="70"
 align="middle"
 alt="2. esimerkki."
 title="2. esimerkki."
 onmouseover="vaihdaKuva('kuva2','../kuvat/koti1.gif')"
 onmouseout="vaihdaKuva('kuva2','../kuvat/city.gif')" /></li>

<li>Kuva vaihtuu kun osoitin kuvan päälle
 ja vaihtuu kolmanteen kun osoitin siirretään pois:
 <img
 name="kuva3"
 src="../kuvat/city.gif"
 width="70"
 height="70"
 align="middle"
 alt="3. esimerkki."
 title="3. esimerkki."
 onmouseover="vaihdaKuva('kuva3','../kuvat/koti1.gif')"
 onmouseout="vaihdaKuva('kuva3','../kuvat/koti2.gif')" /></li>

<li>Useampi kuva vaihtuu kun osoitin kuvan päälle:
 <img
 name="kuva4"
 src="../kuvat/city.gif"
 width="70"
 height="70"
 align="middle"
 alt="4. esimerkki."
 title="4. esimerkki."
 onmouseover="vaihdaKuva('kuva3','../kuvat/koti3.gif');
              vaihdaKuva('kuva2','../kuvat/koti3.gif');
              vaihdaKuva('kuva4','../kuvat/koti3.gif');
              vaihdaKuva('kuva1','../kuvat/koti3.gif')" /></li>
</ul>

<p title="5. esimerkki."
 onclick="vaihdaKuva('kuva3','../kuvat/city.gif');
          vaihdaKuva('kuva2','../kuvat/city.gif');
          vaihdaKuva('kuva4','../kuvat/city.gif');
          vaihdaKuva('kuva1','../kuvat/city.gif')">
Klikkaus tämän elementin päällä palauttaa kuvat alkutilaan.</p>

Tämä sivu kuuluu vaikeimpiin JavaScript-esimerkkeihin.

Weppipakin kotisivulle