Tulos

Hyvin degradoituva käyttäjän aktivoima kuvaesitys. IE-selaimet saavat vaihtotehosteen kaupan päälle.

Koodi

Tallenna koodi RTF-muodossa (5k).

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

<script type="text/javascript" xml:space="preserve">
//<![CDATA[
/*
 * Tunnus:          Kuvaesitys, pyynnöstä alkava
 * Tekijä:          Osmo Saarikumpu
 * Tehty:           2004-05-28
 * 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
// ========================

var onIE = document.all && navigator.userAgent.indexOf("Opera") < 0;
var kuviaYhteensa = Kuvat.length;
var kuvaIndeksi = 0;
var Ajastin;

var Esilataus = new Array();
for (i = 0; i < kuviaYhteensa; i+=1){
Esilataus[i] = new Image();
Esilataus[i].src = Kuvat[i];
}

function Lopeta() {
if (document.Diaesitys.Nappi.value == "Lopeta esitys") {
 window.clearTimeout(Ajastin);
 }
document.Diaesitys.Nappi.value = "Aloita esitys";
}

function Esitys(nappiTeksti){
if (onIE) {
  document.images.Diakuva.style.filter="blendTrans(duration="+efektinKesto+")";
  document.images.Diakuva.filters.blendTrans.Apply();     
 }
 document.images.Diakuva.src = Esilataus[kuvaIndeksi].src;
if (onIE) {
   document.images.Diakuva.filters.blendTrans.Play();
  }
kuvaIndeksi += 1;
if (kuvaIndeksi > (kuviaYhteensa-1)) {
kuvaIndeksi=0;
   }
if (nappiTeksti == "Aloita esitys") {
   document.Diaesitys.Nappi.value = "Lopeta esitys";
 }
if (nappiTeksti == "Lopeta esitys") {
 document.Diaesitys.Nappi.value = "Aloita esitys";
 }
if (document.Diaesitys.Nappi.value == "Aloita esitys") {
   window.clearTimeout(Ajastin);
Lopeta();
return true;
 }
Ajastin = setTimeout('Esitys()', vaihtoVali*1000);
}
}
//]]>
</script>

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

<form action="javascript:void();"
 name="Diaesitys" id="Diaesitys">
<table border="0" cellpadding="0"
 cellspacing="5" align="right"><tr>
<td height="120" width="160"><img
 src="preload/table160.jpg"
 alt="Kuva-esitys-alue." name="Diakuva"
 height="120" width="160" /></td></tr>
<tr><td align="center">
<script type="text/javascript">
//<![CDATA[
/* Kirjoitamme napin ohjelmallisesti,
 jottei sivulle tulostuisi toimimatonta
 nappia JavaScript- tai kuvatuen puuttuessa: */

if (document.images) {
document.write('<input type="button"'
+ 'value="Aloita esitys" name="Nappi"'
+ 'onclick="Esitys(this.value)" />');
}

//]]>
</script>