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

1st JavaScript Editor.


filter Attribute | filter Property

Sets or retrieves the filter or collection of filters applied to the object .

Syntax

HTML Scripting
{ filter : sFilter }
object . style.filter [ = sFilter ]

Possible Values

sFilter String that specifies or receives one of the following values.
filtertype1 (parameter1, parameter2,...) Any filter listed in the Visual Filters and Transitions Reference .
filtertype2 (parameter1, parameter2,...) Any filter listed in the Visual Filters and Transitions Reference .

The property is read/write. The property has no default value. 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

An object must have layout for the filter to render. A simple way to accomplish this is to give the element a specified height and/or width . However, there are several other properties that can give an element layout. For more information on these other properties, see the hasLayout property.

The shadow filter can be applied to the img object by setting the filter on the image's parent container.

The filter mechanism is extensible and enables you to develop and add additional filters later. For more information about filters, see Introduction to Filters and Transitions .

Not available on the Macintosh platform.

Examples

The following example shows how to use an inline style sheet to set the filter on an image.

<IMG STYLE=" filter :progid:DXImageTransform.Microsoft.MotionBlur(strength=50) progid:DXImageTransform.Microsoft.BasicImage(mirror=1)" src="/workshop/samples/author/dhtml/graphics/cone.jpg" height="80px" width="80px" border="0" alt="cone">

The following example shows how to use inline scripting to set the filter on an image.

 

<SCRIPT>
function doFilter ()
{ filterFrom.filters.item(0).Apply();
// 12 is the dissolve filter .
filterFrom.filters.item(0).Transition=12;
imageFrom.style.visibility = "hidden";
filterTo.style.visibility = "";
filterFrom.filters.item(0).play(14); }
</SCRIPT>
</HEAD>
<BODY> Click on the image to start the filter .<BR>
<DIV ID="filterFrom" onClick="doFilter()" STYLE="position:absolute; width:200px; height:250px; background-color:white; filter :revealTrans()">
<IMG ID="imageFrom" STYLE="position:absolute; top:20px; left:20px;" SRC="sphere.jpg">
<DIV ID="filterTo" STYLE="position:absolute; width:200px; height:250px; top:20px; left:20px; background:white; visibility:hidden;">
</DIV> </DIV>

Standards Information

This property is part of a proposed addition to Cascading Style Sheets (CSS) .

Applies To

SMALL Platform Version
Win32: 5.5
Windows CE: 5.5
 
A , ACRONYM , ADDRESS , B , BDO , BIG , BLOCKQUOTE , BODY , BUTTON , CAPTION , CENTER , CITE , CODE , CUSTOM , DD , DEL , DFN , DIR , DIV , DL , DT , EM , FIELDSET , FONT , FORM , FRAME , hn , IFRAME , FRAMESET , I , INS , 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 , KBD , LABEL , LEGEND , LI , MARQUEE , MENU , NOBR , OL , P , PLAINTEXT , PRE , Q , RT , RUBY , S , SAMP , SMALL , SPAN , STRIKE , STRONG , SUB , SUP , TABLE , TEXTAREA , TH , TD , 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.