clip Attribute | clip Property

Sets or retrieves which part of a positioned object is visible.

Syntax

HTML	{ clip: "auto" | "rect( top | right | bottom | left)" }
Scripting	object.style.clip [ = sClip]

Possible Values

auto	Clip to expose entire object.
rect(top right bottom left)	Top, right, bottom, and left specify length values, any of which may be replaced by auto, leaving that side not clipped.

The property is read/write with a default value of auto; the cascading style sheet (CSS) attribute is not inherited.

Remarks

This property defines the shape and size of the positioned object that is visible. The position must be set to absolute. Any part of the object that is outside the clipping region is transparent. Any coordinate can be replaced by the value auto, which exposes the respective side (meaning the side is not clipped).

Note that the order of the values clip:rect(0 0 50 50) would render the object invisible, as it would set both the top and the right positions of the clipping region to 0. To achieve a 50-by-50 view port, the syntax should be clip:rect(0 50 50 0).

Available on the Macintosh platform as of Microsoft® Internet Explorer 5.

Example

The following examples demonstrate use of both the clip attribute and the clip property to modify the appearance of an image.

The sample below uses a call to an embedded (global) style sheet to clip the image.

Sample Code

<DIV Style="position:absolute;top:0;left:200;clip:rect(0.6cm 3cm 2cm 0.5cm)">
<IMG SRC="sphere.jpeg">
</DIV>

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

The sample below uses inline scripting to clip the image.

<IMG ID="sphere" SRC="sphere.jpeg" STYLE="position:absolute;top:0cm;left:0cm;">
<BUTTON onclick="sphere.style.clip='rect(0.2cm 0.6cm 1cm 0.1cm)'">
    Clip Image</BUTTON>

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

Applies To

currentStyle, DIV, runtimeStyle, style

See Also

clipBottom, clipLeft, clipRight, clipTop

Does this content meet your programming needs? Write us!

Back to top