October 1, 2000 - Adding Filters on the Fly
October 1, 2000 Adding Filters on the Fly Tips: October 2000
Yehuda Shiran, Ph.D.
|
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:
<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.