|
Hyvin degradoituva, automaattisesti alkava ja helposti muunneltava kuvaesitys. IE-selaimet saavat kuvanvaihtotehosteen kaupan päälle.
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>
