Clipping images with css

In these examples, a separate background container is used to show the complete image;
in the meantime, this is illustrating the transparency outside the clipped area.

Example 1

Image in the foreground is: 720x480px.

#clipbox {
     position: absolute;
     clip: rect(50px 300px 350px 100px); /* top right bottom left */
     }

<div id="clipbox">
     <img src="images/Kasteel-720x480.gif" width="720" height="480">
</div>

Turn background off / on (javascript)

Undo / redo clipping (javascript)

The definition of clipping, according to the css2.1 Overflow and Clipping rules, is a rectangle:

The rectangle is constructed by giving the coordinates of the top-left point and bottom-right point of the area which has to be visible.
Both coordinates are relative to the top-left corner (0,0) of the containing element.

This means:

to example 2