Tulos

Hyvin degradoituva manuaalinen kuvaesitys. IE-selaimet saavat vaihtotehosteen kaupan päälle.

Koodi

Tallenna koodi RTF-muodossa (7k).

Tämä tulee HEAD-osastoon

<script type="text/javascript">
//<![CDATA[
/*
 * Tunnus:          Kuvaesitys, kommenteilla, lisäversio
 * Tekijä:          Osmo Saarikumpu
 * Tehty:           2004-10-30
 * Tekijänoikeudet: Vapaasti käytettävissä
 */
// Asetukset alempana!

if (document.images) {

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

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

// Luodaan kommenttitaulukko (älä muuta):
var Kommentit=new Array();

// Yhdistetään kommentit kuviin:
Kommentit[0]='Työpöytäni on aina siisti.'
Kommentit[1]='Asun tämän kadun varella.'
Kommentit[2]='Tämä on mun fillari.'
Kommentit[3]='Joskus sapuskat on vähissä.'

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

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

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

function Edellinen() {
 kuvaIndeksi -= 1;
 if (kuvaIndeksi <= 0) {
  kuvaIndeksi = kuviaYhteensa-1;
 }
 if (onIE) {
  document.images.Diakuva.style.filter="blendTrans(duration="+efektinKesto+")";
  document.images.Diakuva.filters.blendTrans.Apply();     
  document.images.Diakuva.filters.blendTrans.Play();
 }
 document.images.Diakuva.src = Esilataus[kuvaIndeksi].src;
 document.forms["Diaesitys"].Tekstit.value=Kommentit[kuvaIndeksi];
}

function Seuraava() {
 kuvaIndeksi += 1;
 if (kuvaIndeksi > kuviaYhteensa-1) {
  kuvaIndeksi = 0;
 }
 if (onIE) {
  document.images.Diakuva.style.filter="blendTrans(duration="+efektinKesto+")";
  document.images.Diakuva.filters.blendTrans.Apply();     
  document.images.Diakuva.filters.blendTrans.Play();
 }
 document.images.Diakuva.src = Esilataus[kuvaIndeksi].src;
 document.forms["Diaesitys"].Tekstit.value=Kommentit[kuvaIndeksi];
}
}
//]]>
</script>

Tämä tulee BODY-osastoon

<form action="javascript:void();"
 name="Diaesitys" id="Diaesitys">
<table border="1" cellpadding="5"
 cellspacing="5"><tr>
<td align="center">
<img 
 src="preload/oletus.gif"
 alt="Diakuva-esitys" id="Diakuva" name="Diakuva"
 height="120" width="160" /></td>
</tr>
<tr>
<td>
<input type="text" name="Tekstit" size="40"
 id="Tekstit" value="Tämä on oletusteksti." />
</td></tr>
<tr><td align="center" colspan="2">
<script type="text/javascript">
//<![CDATA[

/* Kirjoitamme napit ohjelmallisesti,
 jottei sivulle tulostuisi toimimattomia
 nappeja JavaScript tai kuvatuen puuttuessa: */

if (document.images) {
document.write('<input type="button" value="&lt;&lt;--"'
+ 'onclick="Edellinen()" />');
document.write(' <input type="button" value="--&gt;&gt;"'
+ 'onclick="Seuraava()" />');
document.write(' <input type="button" value="&nbsp;X&nbsp;"'
+ 'onclick="window.location.reload(true)" />');
}
//]]>
</script></td></tr></table></form>