Click to return to the DHTML, HTML     
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 }
Scriptingobject.style.clip [ = sClip ]

Possible Values

sClip String that specifies one of the following values:
autoClip 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.
Microsoft Internet Explorer

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.
Microsoft Internet Explorer

Applies To

[ Object Name ]
PlatformVersion
Win16:
Win32:
Mac:
Unix:
WinCE:
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

See Also

clipBottom, clipLeft, clipRight, clipTop



Back to topBack to top

Did you find this topic useful? Suggestions for other topics? Write us!

© 1999 Microsoft Corporation. All rights reserved. Terms of use.