Netscape 4.x allows us to access each property individually:
document.layerName.clip.top
document.layerName.clip.right
document.layerName.clip.bottom
document.layerName.clip.left
So to change the values incrementally, you only need to set a new value to each property:
document.layerName.clip.bottom += 0
document.layerName.clip.left -= 20
In IE and NN6 however, all four clip values are returned together as a string: so they must be reset together:
document.getElementById(layerName).style.clip
So they must be reset together:
document.getElementById(layerName).style.clip="rect(0px 500px 500px 500px)"
What this means to us as far as changing these values incrementally is that we have to break up the clip values string returned by IE/NN6 by concatenating each variable value into the
setTimeout (see last code sample) string argument contained at the end of the closeCurtain() function.
layer.clip="rect("+topVal+"px "+rightVal+"px "+bottomVal+"px "+leftVal+"px)"
Then increment/decrement the values by any amount your heart desires:
bottomVal += 5
leftVal -= 20
Here is the complete closeCurtain() function which creates the curtain effect by incrementally changing the clip values.
var topVal=0; //set these vars as global so they are not reset for each setTimeout call to the function
var rightVal=500;
var bottomVal=500;
var leftVal=500
function closeCurtain(id) {
var layer = browser(id) //get path to layer depending on browser executing this code
if(nn4){
if(layer.clip.left > 0){
layer.clip.top += 0
layer.clip.right += 0
layer.clip.bottom += 0
layer.clip.left -= 20
setTimeout("closeCurtain('"+id+"')",10)
}
}
else {
if(leftVal > 0){
topVal+=0;
rightVal+=0;
bottomVal+=0;
leftVal-=20;
layer.style.clip="rect("+topVal+"px "+rightVal+"px "+bottomVal+"px "+leftVal+"px)"
setTimeout("closeCurtain('"+id+"')",10)
}
}
}
The reset function simply resets the layer's clip regions back to their original values. Pass the id name of the div to the functions when they are invoked:
<a href="javascript:closeCurtain('purple')">Thank you, goodnight!</a>
View the Source