Changing an Object s Visible Area

Changing an Object's Visible Area

The clipping region of an object defines how much of that object is visible in the window (see "Setting the Visible Area of an Element" in Chapter 8). If it is left alone, the entire object is visible. But if you clip the object, you can have as much or as little of it visible as you want. You can then use JavaScript to determine the clipping region (see "Finding an Object's Visible Area" in Chapter 14). In addition, DHTML allows you to change the clipping region on the fly, allowing you to not just show and hide the entire object, but select parts of it.

In this example (Figures 16.11 and 16.12), the layer with the image is initially clipped such that part of the image is not shown. Passing their mouse over the link allows visitors to see the rest of the image, while passing out of the link hides parts of the image again.

Figure 16.11. What is the Cheshire cat smiling about? Roll over the link and find out.

Figure 16.12. The Cheshire cat is smiling because the King can't order his executioner to chop off a head that has no body. This fact makes the Queen of Hearts very, very angry.

To change the visible area of an object:


function setClip(objectID, clipTop, clipRight, clipBottom, clipLeft) {...}

Add the function setClip() to your JavaScript (Code 16.7).

Code 16.7. The setClip() function redraws the boundaries of the clipping region set around an object.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " xhtml1-strict.dtd"> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Finding an Objects Visible Area</title> <script type="text/javascript"> function setClip(objectID, clipTop, clipRight, clipBottom, clipLeft) {      var object = document.getElementById(objectID); = 'rect(' + clipTop + 'px ' + clipRight + 'px ' + clipBottom + 'px  ' + clipLeft +'px)'; } </script> <style type="text/css" media="screen"> #cheshireCat {      position: absolute;      top: 60px;      left: 0;      overflow: hidden;      clip: rect(15px 350px 195px 50px)} </style> </head> <body> <div > <a      onmouseover="setClip('cheshireCat', 35, 320, 400, 70); return false;"      onmouseout="setClip('cheshireCat', 15, 350, 195, 50); return false;"      href="#">What is the Cheshire Cat smiling about? </a> </div> <div >      <img src="/books/3/292/1/html/2/alice31.gif" height="480" width="379" alt="Alice" /> </div> </body></html>

This function uses the ID of the object to be addressedpassed to it as the variable objectIDto find the object that will be reclipped. The function then uses the clip style to set a new clipping region for the object:

[View full width] = 'rect(' + clipTop + 'px ' + clipRight + 'px ' + clipBottom + 'px ' + clipLeft +'px)';


#cheshireCat {...}

Set up the CSS rule(s) for your object(s), with values for clip (the initial clipping region).


onmouseover="setClip('cheshireCat', 35, 320, 400, 70);"

Include an event handler on an element to trigger the setClip() function. Remember that because this function will be using the DOM, it has to be triggered from an event and cannot be triggered from JavaScript in the href of the link.


<div >...</div>

Set up your object(s) for which you want to change the clipping region.


  • The element's borders and padding will be clipped along with the content of the element, but its margin will not be.

  • Currently, clips can only be rectangular, but future versions of CSS promise to support other shapes.

CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: