The filter Property

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

In this page we explain the basics of using filters.

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