filter property

Browser support:
Sets or retrieves the visual filters and transitions applied to the object.
The filter property allows the use of Internet Explorer-specific static and dynamic effects on text and images within an HTML document. By combining filters with basic scripting, you can create visually engaging and interactive documents.
Note that the filter only works for elements that have a layout (block displayed, positioned, or with set width, height properties). For example, filters work for the select element and for all table elements expect the col and colgroup elements.
If you want to use this element as a normal markup, please see the CSS page for this property: filter. You can find other example(s) there.

Possible Filters:

Filter Description
Static filters
Alpha Adjusts the opacity of the contents of the object.
BasicImage Adjusts the color processing, image rotation, or opacity of the contents of the object.
BlendTrans Blends new content into the object.
Blur Blurs the contents of the object so that it appears out of focus.
Chroma Displays a specific color of the contents of the object as transparent.
Compositor Displays new content of the object as a logical color combination of the new and original content.
DropShadow Creates a solid silhouette of the contents of the object, offset in the specified direction.
Emboss Displays the contents of the object as an embossed texture using grayscale values.
Engrave Displays the contents of the object as an engraved texture using grayscale values.
FlipH Reverses the contents of the object horizontally.
FlipV Reverses the contents of the object vertically.
Glow Adds radiance around the outside edges of the contents of the object so that it appears to glow.
Gray Displays the contents of the object in grayscale.
ICMFilter Converts the color content of the object based on an Image Color Management (ICM) profile.
Invert Reverses the hue, saturation, and brightness levels of an object.
Light Creates the effect of a light shining on the contents of the object.
MaskFilter Displays transparent pixels of the object content as a color mask, and makes the nontransparent pixels transparent.
Matrix Resizes, rotates, or reverses the contents of the object using matrix transformation.
MotionBlur Causes the contents of the object to appear to be in motion.
RevealTrans Shows new content by using one of the predefined transition types.
Shadow Creates a solid silhouette of the contents of the object, offset in the specified direction.
Wave Performs a sine wave distortion of the contents of the object along the vertical axis.
Xray Converts the contents of the element to black and white.
Transitions
Barn Reveals new content of the object with a motion that resembles doors opening or closing.
Blinds Reveals new content of the object with a motion that appears to open or close blinds.
CheckerBoard Reveals new content of the object by uncovering squares placed like a checkerboard over the original content.
Fade Reveals new content of the object by fading out the original content.
GradientWipe Reveals new content of the object by passing a gradient band over the original content.
Inset Reveals new content of the object diagonally.
Iris Reveals new content of the object with an iris effect.
Pixelate Displays the contents of the object as colored squares that take the average color value of the pixels they replace.
RadialWipe Reveals new content of the object with a radial wipe, like a windshield-wiper blade.
RandomBars Reveals new content of the object by exposing random lines of pixels.
RandomDissolve Reveals new content of the object by exposing random pixels.
Slide Reveals new content of the object by sliding sections of the image into place.
Spiral Reveals new content of the object with a spiral motion.
Stretch Reveals new content of the object with a stretching motion to cover the original content.
Strips Reveals new content of the object by moving successive strips into place.
Wheel Reveals new content of the object with a rotating motion.
Zigzag Reveals new content of the object with a forward and back motion that moves down the object.
Every filter is a function with a set of parameters.
Click on the following link to see a demonstration of filters: Filters and Transitions Master Sample (MSDN).
If you need more information about filters and transitions, please visit the Visual Filters and Transitions Reference (MSDN) page.
Default: the property has no default value.

Example 1:

This example shows how to use the filter property:
<head>
    <style>
        .alpha {
            position:absolute;
            top:66px;
            left:10px;
            filter:alpha(opacity=40);
        }
    </style>
    <script type="text/javascript">
        function ChangeOpacity () {
            var div = document.getElementById ("myDiv");
            div.style.filter = "alpha(opacity=90)";
        }
    </script>
</head>
<body>
    Normal text in the body
    <div class="alpha" id="myDiv">text within a division element</div>
    <button onclick="ChangeOpacity ();">Change division opacity!</button>
</body>
Did you find this example helpful? yes no

Example 2:

This example shows how to manipulate the value of the filter property through the filters collection:
<head>
    <style>
        .alpha {
            position:absolute;
            top:66px;
            left:10px;
            filter:alpha(opacity=40);
        }
    </style>
    <script type="text/javascript">
        function ChangeOpacity () {
            var div = document.getElementById ("myDiv");
            var filter = div.filters["alpha"];
            filter.opacity = 90;
        }
    </script>
</head>
<body>
    Normal text in the body
    <div class="alpha" id="myDiv">text within a division element</div>
    <button onclick="ChangeOpacity ();">Change division opacity!</button>
</body>
Did you find this example helpful? yes no

Supported by objects:

External links:

User Contributed Comments

Post Content

Post Content