15 out of 17 rated this helpful - Rate this topic

-ms-filter Attribute | filter Property

Gets or sets the filter or collection of filters that are applied to the object.

Syntax

CSS { -ms-filter : sFilter }

Scripting [ sFilter = ] object.style.filter

CSS	{ -ms-filter : sFilter }
Scripting	[ sFilter = ] object.style.filter

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.

DHTML expressions can be used in place of the preceding value(s). As of Internet Explorer 8, expressions are supported in IE7 Standards mode and IE5 (Quirks) mode only. For more information, see About Dynamic Properties and Defining Document Compatibility.

Remarks

Windows Internet Explorer 8. The -ms-filter attribute is an extension to CSS, and can be used as a synonym for filter in IE8 Standards mode. When you use -ms-filter, enclose the progid in single quotes (') or double quotes ("). Use commas (,) to separate multiple values, as shown in the Examples section.

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 width, or both. However, there are several other properties that can give an element layout. For more information about 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 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 the -ms-filter attribute in Internet Explorer 8.


-ms-filter: 'progid:DXImageTransform.Microsoft.MotionBlur(strength=50), progid:DXImageTransform.Microsoft.BasicImage(mirror=1)';

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_8.htm

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" alt="cone">

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_h.htm

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


<script type="text/javascript">
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>

<p>Click the image to start the filter.</p>
// 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" 
    alt="sphere">
<div id="filterTo" 
    style="position: absolute; 
        width: 200px; 
        height: 250px; 
        top: 20px; 
        left: 20px; 
        background: white; 
        visibility: hidden;">
</div>
</div>

</body>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_s.htm

Standards Information

There is no public standard that applies to this property.

Applies To

A, ABBR, ACRONYM, ADDRESS, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, CSSStyleDeclaration, currentStyle, CUSTOM, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, FRAME, FRAMESET, hn, 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, INS, KBD, LABEL, LEGEND, LI, MARQUEE, MENU, NOBR, OL, P, PLAINTEXT, PRE, Q, RT, RUBY, S, SAMP, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TD, TEXTAREA, TH, TT, U, UL, VAR, XMP, CSSCurrentStyleDeclaration Constructor, CSSRuleStyleDeclaration Constructor, CSSStyleDeclaration Constructor

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)

-ms-filter Attribute | filter Property

Community Additions