The Filters Demo Tool

In this column we extend further the subject of filters. Filters are a great way to make your site more attractive, interactive, and colorful. The problem with filters is that there are about a dozen of them and it is not trivial to figure out which parameters control which filter, and how to set these parameters to reach your desired visual effect. Not to fear, Doc JavaScript is here! To help you out, we've created a filters Demo Tool. You can select a filter, set its parameters, and watch the filter's effect on a given HTML element that includes an image, some text, and a background. At any point during this demo, you can copy the generated HTML code and paste it into your document. WebReference's own Andrew King and Robert Peyser provided the sunset image shown here. Go ahead and try it now. This tool is based on a script from Microsoft that we simplified on the one hand, and extended with more filters on the other.

Another objective of this column is to show you how to program such a tool. There are some techniques and tricks that are very important for your JavaScript knowledge. We'll explain every line of the code and prove that it's not as difficult as it looks. This tool only works in Internet Explorer 5.5.

In this column you will learn:

• How to define the hidden controls
• How to define the HTML elements of the tool
• How to write the main function
• How to assemble the HTML code for a filter
• How to initialize the tool

We also provide you with the tool's listing in both HTML and ZIP formats.

Next: How to define the hidden controls