clip Attribute | clip Property

MS Office DHTML, HTML & CSS

previous page next page

Click to return to the DHTML, HTML & CSS home page

clientY Property

clipBottom Property

DHTML Properties

Web Workshop | DHTML, HTML & CSS

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 one of the following 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 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 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 (meaning the side is not clipped).

The order of the values clip:rect(0 0 50 50) renders the object invisible as 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 Internet Explorer 5.

Example

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

This example 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.jpg">
</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.

This example 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

[ Object Name ]

Platform Version

Win16:

Win32:

Mac:

Unix:

WinCE:

Version data is listed when the mouse hovers over a link, or the link has focus.

A, ADDRESS, APPLET, B, BDO, BIG, BLOCKQUOTE, BUTTON, CENTER, CITE, CODE, custom, DD, 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