Introduction to Filters in IE 5.5 and Up: The filter Property

Introduction to Filters in IE 5.5 and Up

The filter Property

filter is a property of the style object. This is a string that you can read or write, allowing you to manipulate the filters of an object directly. Let's take our example from previous pages:

<DIV ID="mydiv" STYLE="width: 40%; filter:
 progid:DXImageTransform.Microsoft.engrave()
 progid:DXImageTransform.Microsoft.DropShadow(color='red',
 OffX=3, OffY=2)">
<IMAGE SRC="bicycle.gif"><FONT COLOR="blue">In this page we explain
 the basics of using filters.</FONT>
</DIV>

The code javascript:alert(mydiv.style.filter) prints out the filters defined above. Try it. You should get the above filter definitions. Again, the order of the filters is important and determine the final outcome.

Now, let's add another filter on the fly. Suppose we want to mirror the DIV element. We do it with the BasicImage filter, with mirror=1. The script is the following:

<SCRIPT LANGUAGE="JavaScript">
<!--
function addMirror() {
  mydiv.style.filter +=
   "progid:DXImageTransform.Microsoft.BasicImage(mirror=1)";
}
// -->
</SCRIPT>

Try it now. Try it over and over and see how the DIV element flips from side to side, mirroring its previous position. For performance reasons, you should avoid adding filters on the fly. It is better to define all filters a priori with enabled property set to false. When you want the filter to kick in, simply set its enabled property to true.

Next: A Final Word

Produced by Yehuda Shiran and Tomer Shiran
All Rights Reserved. Legal Notices.
Created: September 11, 2000
Revised: September 11, 2000

URL: https://www.webreference.com/js/column68/5.html