filter Attribute | filter Property

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

Syntax

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

Possible Values

sFilter String that specifies or receives one of the following values.
filtertype1 (parameter1, parameter2,...)
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. .

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.
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>
// Call the function.
<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

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

All Tech Tips

filter Attribute | filter Property