Tämä on esimerkkisivu kuvien esilatauksesta ja vaihdosta

Tulos

Pikkukuvan aktivointi vaihtaa ison vastaavan näkyviin.
Isojen kuvien tulostusalue.

IE-selaimet saavat kuvanvaihtotehosteen kaupan päälle.

Esimerkkikuva nro. 1
Esimerkkikuva nro. 2
Esimerkkikuva nro. 3
Esimerkkikuva nro. 4

Koodi

Tämä tulee HEAD-osastoon

<script type="text/javascript">
//<![CDATA[
// Luodaan kuvataulukko:
var IsotKuvat = new Array();

// Kerrotaan kuvien järjestys, määrä ja sijainti:
// (seuraa ao. logiikkaa muutoksissa)
IsotKuvat[0] = "bike640.jpg";
IsotKuvat[1] = "desk640.jpg";
IsotKuvat[2] = "street640.jpg";
IsotKuvat[3] = "table640.jpg";
// Lisää/vähennä kuvien määrää tarvittaessa.

// Kuvien esilataus:
for (i=0; i < IsotKuvat.length; i++) {
var Esilataus = new Image();
Esilataus.src = IsotKuvat[i];
}

// IE:n tunnistusyritys, eli asiakasohjelma
// on IE mikäli se tukee all-kokoelmaa,
// eikä sen nimessä esiinny merkkijono "Opera":
var onIE = document.all && navigator.userAgent.indexOf("Opera") < 0;

// Aseta IE-selainten vaihtoefektin kesto sekuntteina:
var efektinKesto = 3;

// Luodaan funktio kuvanvaihtoa varten:
function Vaihto(Indeksi) {
if (onIE) { // asetetaan efekti: 
 document.images.Paakuva.style.filter="blendTrans(duration="+efektinKesto+")";
  document.images.Paakuva.filters.blendTrans.Apply();     
 }

// Vaihdetaan kuva:
document['Paakuva'].src = IsotKuvat[Indeksi];

 if (onIE) { // suoritetaan efekti:
  document.images.Paakuva.filters.blendTrans.Play();
  }
}
//]]>
</script>

Tämä tulee BODY-osastoon

<table summary="Kuvanvaihtotaulukko." align="center" cellpadding="3">
<caption>Pikkukuvan aktivointi vaihtaa ison vastaavan näkyviin.</caption>

<tr>
<td rowspan="4">
<img id="Paakuva" name="Paakuva" src="table640.jpg" alt="Isojen kuvien tulostusalue." border="1" width="640" height="480" />
<p>IE-selaimet saavat kuvanvaihtotehosteen kaupan päälle.</p>
</td>
<td>
<a href="javascript:Vaihto(0)"><img src="bike160.jpg"
alt="Esimerkkikuva nro. 1" width="160" height="120" /></a>
</td>
</tr>

<tr>
<td>
<a href="javascript:Vaihto(1)"><img src="desk160.jpg"
alt="Esimerkkikuva nro. 2" width="160" height="120" /></a>
</td>
</tr>

<tr>
<td>
<a href="javascript:Vaihto(2)"><img src="street160.jpg"
alt="Esimerkkikuva nro. 3" width="160" height="120" /></a>
</td>
</tr>

<tr>
<td>
<a href="javascript:Vaihto(3)"><img src="table160.jpg"
alt="Esimerkkikuva nro. 4" width="160" height="120" /></a>
</td>
</tr>

</table>
Weppipakin kotisivulle