Pure CSS Clipping Regions - ΩJr. Software Articles and Products

What's a clipping region?

A clipping region resembles a window. It creates a rectangular view on a part of the larger world behind it. It allows to specify exactly what part to show.

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

Browser support for clipping regions appears shotty at best. See here the CSS according to the CSS2 recommendation)
.clipped {
overflow: hidden;
clip: rect(top, right, bottom, left);
}

• Some (Mozilla 1.5) don't allow lengths nor commas (in direct contradiction to the CSS2 recommendation).

• Some (Opera 7) don't react to style changes.

• Some (Internet Explorer) seem to need absolute positioning and client-side scripting.

Solution

In the example below (which only works in some browsers if it is a hyperlink), I've incorporated no javascript, no rollover image swapping. Instead, the image contains a transparant gif.

The visible image is a three-panel image, almost 300px wide, added as background by the stylesheet. On hover and focus, the background-position is changed, showing a different part of the same image.