Accessing and Manipulating Clip Values with JavaScript
show clip values of purple layer before
Thank you, goodnight!
show clip values of purple layer after
Reset


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