October 1, 2000 - Adding Filters on the Fly | WebReference

October 1, 2000 - Adding Filters on the Fly

Yehuda Shiran October 1, 2000
Adding Filters on the Fly
Tips: October 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

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 an example:

In this tip we explain the basics of using filters.
The listing is as follows:

<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 tip 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. 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.

Learn more about filters in Column 68, Introduction to Filters in IE 5.5 and Up.