Tulos

Diaesitykseni:
Kuva-alue

Koodi

Tämä tulee HEAD-osastoon

<script type="text/javascript">
// kuvien esilataus
if (document.images)
   {
   var kuva1 = new Image(70,70);
   kuva1.src = "../kuvat/koti1.gif";
   var kuva2 = new Image(70,70);
   kuva2.src = "../kuvat/koti2.gif";
   var kuva3 = new Image(70,70);
   kuva3.src = "../kuvat/koti3.gif";
   }
// Original: Ricocheting (http://www.ricocheting.com)
// Modified: Osmo Saarikumpu
var rotate_delay = 5000; // kuvien vaihtonopeus millisekuntteina (5000 = 5 sek.)
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
   }
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
   }
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
   }
}
</script>

Tämä tulee BODY-osastoon

<form action="javascript:void('0');"
	 id="slideform" name="slideform">
	<table cellspacing="1" cellpadding="4" align="center"
 summary="Diaesityksen asemointitaulukko." border="1">
<tr>
	<th>
Diaesitykseni:
	</th>
</tr>
<tr>
	<td align="center" valign="middle">
<img src="kuvat/city.gif" name="show" id="show"
 width="70" height="70" alt="Kuva-alue">
	</td>
</tr>
<tr>
	<td align="center">
<select name="slide" id="slide" onchange="change();">
	<option value="../kuvat/koti1.gif" selected="selected">
	Koti I
	</option>
	<option value="../kuvat/koti2.gif">
	Koti II
	</option>
	<option value="../kuvat/koti3.gif">
	Koti III
	</option>
	<option value="kuvat/city.gif">
	Kaupunki
	</option>
</select>
	</td>
</tr>
<tr>
	<td align="center">
<input type="button" onclick="first();"
 value="|<<" title="Alkuun">
<input type="button" onclick="previous();"
 value="<<" title="Edellinen">
<input type="button" name="slidebutton" onclick="ap(this.value);"
 value="Aloita" title="Autoplay">
<input type="button" onclick="next();" value=">>"
 title="Seuraava">
<input type="button" onclick="last();"
 value=">>|" title="Loppuun">
	</td>
</tr>
	</table>
</form>

Tämä sivu kuuluu vaikeimpiin JavaScript-esimerkkeihin.

Weppipakin kotisivulle