You are here: irt.org | FAQ | DHTML | Q1297 [ previous next ]
The following uses layers to produce a slide show that will work in Netscape Navigator 4 and Internet Explorer 4 and Internet Explorer 5:
<style type="text/css"><!--
.hidden { position: absolute; visibility: hidden; }
.visible { position: absolute; visibility: visible; }
//--></style>
<script type="text/javascript" language="JavaScript"><!--
function set(What,Value) {
if (document.layers && document.layers[What] != null) document.layers[What].visibility = Value;
else if (document.all) document.all[What].style.visibility = Value;
}
var layers = 5;
var layer = 1;
function next() {
if (layer < layers) {
set('myLayer' + layer,'hidden');
set('myLayer' + (++layer),'visible');
}
}
function prev() {
if (layer > 1) {
set('myLayer' + layer,'hidden');
set('myLayer' + (--layer),'visible');
}
}
//--></script>
<form>
<input type="button" value="prev" onClick="prev()">
<input type="button" value="next" onClick="next()">
</form>
<span name="myLayer1" class="visible">
Slide 1
</span>
<span name="myLayer2" class="hidden">
Slide 2
</span>
<span name="myLayer3" class="hidden">
Slide 3
</span>
<span name="myLayer4" class="hidden">
Slide 4
</span>
<span name="myLayer5" class="hidden">
Slide 5
</span>