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.
People who read this tip also read these tips:
Look for similar tips by subject:
| 
