Filter Attribute and filter Property
Sets or retrieves the filter or collection of filters applied to the object.
Syntax
HTML
{ 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 not supported in IE8 mode. 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” alt=”cone”>
This feature requires Microsoft Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
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 on 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>
This feature requires Microsoft Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
Standards Information
There is no public standard that applies to this property.
