The Art of Clipping

Clipping is a function that is applied to layers. Its role is to display part of a layer only. For instance, if you had a layer containing an image measuring 100 x 100 pixels, you could define a clipping area for the layer so that only the upper left quarter of the image would be displayed in the browser:

<div id="layer_id" style="position:absolute; left:0px; top:0px; width:100px; height:100px;clip:'rect(0px 50px 50px 0px)'">


But the coordinates of the clipping area are not set permanently. You can change them with just a few lines of JavaScript. The code used depends on the visitor's browser. For instance, to make the lower right quarter of our previous layer example (identified by "layer_id") visible, the JavaScript code should read as follows:

• For Netscape Navigator, we will directly modify the clip.left, clip.right, clip.top and clip.bottom properties to redefine the clipping area:
  
  

document.layers["layer_id"].clip.left = 50;
document.layers["layer_id"].clip.right = 100;
document.layers["layer_id"].clip.top = 50;
document.layers["layer_id"].clip.bottom = 100;

• For Microsoft Internet Explorer, the clipping area is defined as a rectangle with coordinates given between parentheses. We then pass the rect() to the clip property of the style attribute of the layer:
  
  
ev = 'rect(50px 100px 100px 50px)';
document.all["layer_id"].style.clip = ev;