Kuva-esitys-alue.

Tulos

Hyvin degradoituva, automaattisesti alkava ja helposti muunneltava kuvaesitys. IE-selaimet saavat kuvanvaihtotehosteen kaupan päälle.

Koodi

Tallenna koodi RTF-muodossa (5k).

<!-- Tämä tulee HEAD-osastoon: -->

<script type="text/javascript">
//<![CDATA[
/*
 * Tunnus:          Automaattinen kuvaesitys
 * Tekijä:          Osmo Saarikumpu
 * Tehty:           2004-03-31
 * Tekijänoikeudet: Vapaasti käytettävissä
 */
// Asetukset alempana!

if (document.images) {

// Asetukset alkavat:
// ==================

// Aseta kuvien vaihtoväli sekuntteina:
var vaihtoVali = 6;

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

// Luodaan kuvataulukko (älä muuta):
var Kuvat = new Array();

// Kerrotaan kuvien järjestys, määrä ja sijainti:
// (seuraa ao. logiikkaa muutoksissa)

Kuvat[0] = 'preload/desk160.jpg';
Kuvat[1] = 'preload/street160.jpg';
Kuvat[2] = 'preload/bike160.jpg';
Kuvat[3] = 'preload/table160.jpg';

// Asetukset loppuvat tähän
// ========================

// 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;

// Sijoitetaan kuvien kokonaismäärä muuttujaan:
var kuviaYhteensa = Kuvat.length;

// Alustetaan kuvaindeksi:
var kuvaIndeksi = 0;

// Esiladataan ilmoitetut kuvat
// ja sijoitetaan ne uuten taulukkoon:
var Esilataus = new Array();
for (i = 0; i < kuviaYhteensa; i+=1){
 Esilataus[i] = new Image();
 Esilataus[i].src = Kuvat[i];
}

// Luodaan funktio kuvanvaihtoa varten:
function Esitys(){
 if (onIE) { // asetetaan efekti: 
  document.images.Diakuva.style.filter="blendTrans(duration="+efektinKesto+")";
  document.images.Diakuva.filters.blendTrans.Apply();     
 }
// Vaihdetaan kuva:
 document.images.Diakuva.src = Esilataus[kuvaIndeksi].src;
  if (onIE) { // suoritetaan efekti:
   document.images.Diakuva.filters.blendTrans.Play();
  }
   kuvaIndeksi += 1; // kasvatetaan kuvaindeksiä yhdellä
   if (kuvaIndeksi > (kuviaYhteensa-1)) { // kunnes kaikki on käyty läpi
    kuvaIndeksi=0; // alustetaan kuvaindeksi uudestaan
   }
// Toistetaan asetetulla kuvanvaihtovälillä:
 setTimeout('Esitys()', vaihtoVali*1000);
}
}
//]]>
</script>

<!-- BODYn alkutagi: -->

<body onload="if (document.images) {Esitys();}">
<!-- Ajetaan funktio sivun latauduttua,
     mikäli asiakasohjelma tukee kuvia. -->  

<!-- Tämä tulee BODY-osastoon: -->

<table border="5" cellpadding="0" cellspacing="0"
 align="right"><tr><td height="120" width="160"><img
 alt="Kuva-esitys-alue." src="preload/table160.jpg"
 name="Diakuva" height="120" width="160" /></td>
</tr></table>


Weppipakin kotisivulle