Revealing hidden layers in sequence with time delay

ironwing

09-26-2003, 04:29 AM

Hi,

I have an image built up of multiple CSS layers:

.....
#layer32 { position: absolute; top: 0px; left: 0px; visibility: visible }
#layer34 { position: absolute; top: 0px; left: 0px; visibility: visible }
#layer35 { position: absolute; top: 0px; left: 0px; visibility: visible }
....

then later:

.....
<span id="layer32"><img src="myimage32.gif"></span>
<span id="layer34"><img src="myimage34.gif"></span>
<span id="layer35"><img src="myimage35.gif"></span>
.....

The layers are generated via a perl script reading user input. Right now all the layers are set as visible upon loading. I would like to set it up so that the layers load hidden and then one by one become visible with a brief time delay between layers until all layers are visible. Thanks for any suggestions.

Dan

glenngv

09-26-2003, 04:46 AM

this will show each layer every 2 seconds.

<head>
<style type="text/css">
#layer32 { position: absolute; top: 0px; left: 0px; visibility: hidden }
#layer34 { position: absolute; top: 0px; left: 0px; visibility: hidden }
#layer35 { position: absolute; top: 0px; left: 0px; visibility: hidden }
</style>
<script type="text/javascript">

function showLayers(){
var delay = 2000; //2 secs
setTimeout("document.getElementById('layer32').style.visibility='visible'",delay);
setTimeout("document.getElementById('layer34').style.visibility='visible'",delay*2);
setTimeout("document.getElementById('layer35').style.visibility='visible'",delay*3);
}
</script>
</head>
<body onload="showLayers()">

ironwing

09-26-2003, 05:27 AM

Worked great! Thank you.

Dan