Tämä on oletusteksti.

Tulos

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

Koodi

Tallenna koodi RTF-muodossa (8k).

Tämä tulee HEAD-osastoon

<script type="text/javascript">
//<![CDATA[
/*
 * Tunnus:	    Kuvaesitys, kommenteilla
 * Tekijä:	    Osmo Saarikumpu
 * Tehty:           2004-07-23
 * 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 = 2;

// 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 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.forms["Diaesitys"].Nappi.value = "Aloita esitys";
}

function Esitys(nappiTeksti){
 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.src = Esilataus[kuvaIndeksi].src;
 document.forms["Diaesitys"].Tekstit.value=Kommentit[kuvaIndeksi];

  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="Diakuva-esitys" id="Diakuva" name="Diakuva"
 height="120" width="160" /></td>
<td><textarea name="Tekstit" rows="6" cols="20"
 style="width:160px;height:120px">Tämä on
oletusteksti.</textarea></td></tr>
<tr><td align="center" colspan="2">
<script type="text/javascript">
//<![CDATA[
/* Kirjoitamme napin ohjelmallisesti,
 jottei sivulle tulostuisi toimimatonta
 nappia JavaScript-tuen puuttuessa: */
if (document.images) {
document.write('<input type="button"'
+ 'value="Aloita esitys" name="Nappi"'
+ 'onclick="Esitys(this.value)" />');
}
//]]>
</script>
</td></tr>
</table>
</form>