Applying Filters
Other versions of this page are also available for the following:
.gif "A hyphen indicates that the information in this topic is not relevant for this platform, or that the platform does not support the API that is listed.")
.gif "A checkmark indicates that the information in this topic is relevant for this platform, and that any API listed is also supported on this platform.")
8/28/2008
Creating effects, such as page transitions, requires complex scripting. Filters offer a convenient package to add effects, such as transitions, and eliminate the need for complex scripting. Also, filters can be applied to whole classes of elements because they use the declarative and inherited syntax of CSS.
The object that the filter is applied to must have a layout before the filter effect appears. You can give the object a layout by setting the height or width property, by setting the position property to absolute, by setting the writingMode property to tb-rl, or by setting the contentEditable property to true.
For more information, see "Layout Properties" at this Microsoft Web site.
To apply a filter to an object in HTML, use the following syntax:
<ELEMENT STYLE=
"filter:progid:DXImageTransform.Microsoft.<Filter Name>(sProperties)">
To apply a filter to an object in a script, use the following syntax:
object.style.filter =
"progid:DXImageTransform.Microsoft.<Filter Name>(sProperties)"
The following table shows the supported filters and a description of the purpose of each:
| Filter name | Description |
|---|---|
Alpha |
Adjusts the opacity of the content of the object |
BasicImage |
Adjusts the color processing, image rotation, or opacity of the content of the object |
Chroma |
Converts a specific color of the object's content to transparent |
Compositor |
Displays new content of the object as a logical color combination of the new and original content. The color and alpha values of each version of the content are evaluated to determine the final color of the output image. |
DropShadow |
Creates a solid silhouette of the content of the object, offset in the specified direction. This creates the illusion that the content is floating and casting a shadow. |
Glow |
Adds radiance around the outside edges of the content of the object so that it seems to glow |
Light |
Creates the effect of a light shining on the content of the object |
MaskFilter |
Displays transparent pixels of the object content as a color mask and makes the non-transparent pixels transparent |
Shadow |
Creates a solid silhouette of the content of the object, offset in the specified direction. This creates the illusion of a shadow. |
The filter parameter, sProperties, is a string that specifies one or more properties exposed by the filter. These properties define the nature of the effect such as color or the opacity level. For more information about the properties and attributes exposed by the supported filters in Windows Embedded CE, see Filter and Transition Properties.
The following example shows the Alpha filter. This example blends the target object, a button control, into the background. You can control the blend by setting the Opacity property. The following HTML shows how to cause the target to appear 20 percent opaque.
<IMG ID=sample SRC="sample.jpg"
STYLE="filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=20)">
The filters collection that is available on every object provides access to the individual filters of the object. The collection can be accessed like any other collection in an object model. For example, the following line of script addresses the first filter in the collection of filters of the theDiv object.
theDiv.filters.item(0).enabled = true;
As interactive objects, links can change states in response to mouse events. This example script applies the DropShadow filter to the content of a DIV element, oFilter. You can click the text of oFilter to remove or restore the shadow.
<SCRIPT>
function fnDepress()
{
var bState = oFilterDIV.filters.item('DXImageTransform.Microsoft.dropshadow').enabled;
oFilterDIV.filters.item('DXImageTransform.Microsoft.dropshadow').enabled = !bState;
}
</SCRIPT>
<DIV ID="oFilterDIV" STYLE="cursor:hand;height:160px; padding:10px; font:bold 13pt verdana;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray', Positive='true')" onclick="fnDepress();">
This is the DIV content.
</DIV>
For more information about the supported filters, see this Microsoft Web site.