Home | Top | Free Ajax Editor | JavaScript Editor JavaScript EditorGet Advanced
JavaScript and Ajax Editor,
Validator and Debugger!
1st JavaScript Editor.

↑

clip Attribute | clip Property

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

Syntax

HTML Scripting
{ clip : sClip }
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>

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>

Standards Information

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

Applies To

[ Object Name ] Platform Version
Win16:
Win32:
Windows CE:
Unix:
Mac:
 
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
Home | Top | Free Ajax Editor | JavaScript Editor JavaScript EditorGet Advanced
JavaScript and Ajax Editor,
Validator and Debugger!
1st JavaScript Editor.

→