clip Attribute | clip

HTML (DHTML)

previous page next page

clip Attribute | clip Property

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

Syntax

HTML { clip : sClip }
Scripting object.style.clip [ = sClip ]

HTML	{ clip : sClip }
Scripting	object.style.clip [ = sClip ]

Possible Values

sClip String that specifies or receives one of the following values.
auto Default. Clip to expose entire object.
rect(top right bottom left) Top, right, bottom, and left specify length values, any of which can be replaced by auto, leaving that side not clipped. The value of top specifies that everything above this value on the Y axis (with 0 at the top) is clipped. The value of right specifies that everything above this value on the X axis (with 0 at the left) is clipped. The value of bottom specifies that everything below this value on the Y axis (with 0 at the top) is clipped. The value of left specifies that everything to the left of this value on the X axis (with 0 at the left) is clipped.
The property is read/write. The property has a default value of auto. The Cascading Style Sheets (CSS) attribute is not inherited.
Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer 5. For more information, see About Dynamic Properties.

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 (that is, the side is not clipped).
The order of the values clip:rect(0 0 50 50) renders the object invisible because it sets the top and right positions of the clipping region to 0. To achieve a 50-by-50 view port, use clip:rect(0 50 50 0).
The clip attribute and the clip property are available on the Macintosh platform, as of Microsoft® Internet Explorer 5.

Examples

The following example shows how to use an inline style to clip the image.
<HTML>
<BODY>
<DIV STYLE="position:absolute;top:0;left:200;
clip:rect(15px auto auto auto)">
<IMG SRC="sphere.jpg"/>
</DIV>
<DIV STYLE="position:absolute;top:0;left:300;
clip:rect(auto 15px auto auto)">
<IMG SRC="sphere.jpg"/>
</DIV>
<DIV STYLE="position:absolute;top:0;left:400;
clip:rect(auto auto 15px auto)">
<IMG SRC="sphere.jpg"/>
</DIV>
<DIV STYLE="position:absolute;top:0;left:500;
clip:rect(auto auto auto 15px)">
<IMG SRC="sphere.jpg"/>
</DIV>
</BODY>
</HTML>
This feature requires Microsoft® Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
The following example shows how to use inline scripting to clip the image.
<IMG ID="sphere" SRC="sphere.jpg"
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 Microsoft® Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Standards Information

This property is defined in Cascading Style Sheets (CSS), Level 2 (CSS2) .

Applies To

A, ADDRESS, APPLET, B, BDO, BIG, BLOCKQUOTE, BUTTON, CENTER, CITE, CODE, CUSTOM, DD, defaults, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, hn, HR, I, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OBJECT, OL, P, PRE, RUBY, runtimeStyle, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TD, TEXTAREA, TH, TR, TT, U, UL, VAR, XMP