A clipping region resembles a picture frame, one that creates a rectangular view on a part of its contents. The actual picture (or any other content) could have larger measures than displayed (in other words: one could show only a portion of the content).
Why do you want to use that?
Because clipping regions provide a wonderful substitute for image swapping. Simply point the region to another part of the completely loaded image and voila, one changed image. Of course, some people like to create more pleasing eye-candy.
Problem
Browsers support clipping regions {overflow:hidden; clip:rect(top,right,bottom,left);} appears shotty at best. Some (Mozilla 1.5) don't allow lengths nor commas (in direct contradiction to the css2 recommendation), some (Opera 7) do allow lengths and commas but don't react to style changes, some (Internet Explorer) seem to need absolute positioning and client-side scripting.
Solution
In the example to the right (which is a hyperlink), I've incorporated no rollover image swapping. Instead, the image contains a transparant gif. The visible image is a three panel, almost 300px wide image, added as background by the stylesheet. On hover and focus, the background-position is changed, showing a different part of the same image.
In the example to the right (which is a hyperlink), I've incorporated no rollover image swapping. Instead, the image contains a transparant gif. The visible image is a three panel, almost 300px wide image, added as background by the stylesheet. On hover and focus, the background-position is changed, showing a different part of the same image.