You are here: irt.org | FAQ | DHTML | Q908 [ previous next ]
The following demonstrates the use of layer clipping - which gives the impression of a sliding layer.
<span id="sphere" style="position:absolute; width:500; height:50;"> <img src="dot.gif" width="500" height="50"> </span> <script type="text/javascript" language="JavaScript"><!-- function changeit() { if (document.all) document.all('sphere').style.clip = 'rect(' + t + ' ' + r + ' ' + b + ' ' + l + ')'; else if (document.layers) { document.layers['sphere'].clip.top = t; document.layers['sphere'].clip.right = r; document.layers['sphere'].clip.bottom = b; document.layers['sphere'].clip.left = l; } } var t=0, r=0, b=100, l=0; function slide(x) { if (r<500) { r += x; changeit(); setTimeout('slide(x)',500); } } changeit(); slide(20); //--></script>
It can be adapted to trigger on each image load:
<img src="image.gif onLoad="slide(50)">
In which case you need to remove the two seTimeouts from the above script.