Dynamic HTML in Action

The filter style allows for 14 visual effects, as described in the following table.

A filter is applied like any other style—through a STYLE attribute, a global style sheet, or a linked style sheet. The values for the filter attribute are composed of the name of the filter to be applied followed by a set of arguments that control the filter, placed in parentheses. Code Listing 16-1 shows how the blur filter is applied to a <DIV> tag to change the appearance of a line of text on the page. Figure 16-1 below demonstrates the results.

Code Listing 16-1.

Figure 16-1. Applying the blur filter to an object.

The global style sheet in Code Listing 16-1 sets the width of the object (explained in the next paragraph), the font size to large, the style to bold, and the type to Arial. The filter is then applied through an in-line style. It is given three arguments: add, direction, and strength. The add argument specifies whether the original text should appear with a shadow behind it, or whether the shadow should appear alone. Code Listing 16-1 specifies the value 1, which means that the original text is added to the shadow. A value of 0 would have excluded the original text. The direction argument specifies the direction of the blur, which is figured clockwise and based on the object's vertical axis. This argument accepts values in 45-degree increments. The possible values are 0 (up), 45 (up and to the right), 90 (right), 135 (bottom and to the right), 180 (bottom), 225 (bottom and to the left), 270 (the default, left), and 315 (up and to the left). The strength argument defines the length of the blur in number of pixels. Most filters have multiple arguments (sometimes referred to as parameters), and some have none at all. A full discussion of the arguments for each filter can be found on the SBN Workshop Web site. On the CD, go to Workshop (References); DHTML, HTML & CSS; CSS; CSS Attributes Reference; filter, and then click on the Visual Filter filter type. Online, visit the MSDN Online Resource page at msdn.microsoft.com/resources/schurmandhtml.htm, or open the file named MSDN_OL.htm on the companion CD and choose Visual Filter.

Visual filters can be used only with the following elements: BODY, BUTTON, DIV, IMG, INPUT, MARQUEE, SPAN, TABLE, TD, TEXTAREA, TFOOT, TH, THEAD, and TR. DIV and SPAN require that either the height or width CSS attribute be defined, or that the CSS position attribute be set to absolute.

Code Listing 16-2 demonstrates a number of the other filters in use. Figure 16-2, below, shows the resulting display.

Code Listing 16-2.

Code Listing 16-2 uses IMG tags rather than DIVs. The image used is a GIF of a car with transparent pixels around the car and in the windows. We applied the alpha, flipv, glow, chroma, and wave filters. Some of these filters have optional parameters that we did not take advantage of. For example, the alpha filter allows precise control over the fade effect by letting you specify a beginning and end location for the opacity and finishopacity.

Figure 16-2. Other available visual filters.

Application Through Script

The Code Listings thus far have applied filters directly through in-line styles. Filters can also be applied to an object through the object model with script. Each element has a style child object, which in turn has a filter child object. A filter value can be assigned as follows:

Code Listing 16-3 shows an example of assigning a style through script based on events happening on the page. Figure 16-3 shows the results.

Code Listing 16-3.

Figure 16-3. Applying filters dynamically through script.

When the page is first loaded, Internet Explorer displays the text without any special style or filter. When the user moves the mouse over any of the DIV elements, the function addFilt takes over and dynamically applies the glow filter to that DIV. When the pointer is moved away from the DIV element, the removeFilt function removes the filter. This simple example of dynamic filters shows how easy it is to add a lot of pizzazz and interactivity to an ordinary Web page. You can add multiple filters to a single object at one time, resulting in a more interactive and complex Web page. Code Listing 16-4, below, demonstrates this by applying both the glow filter and the wave filter to text. Figure 16-4 illustrates the results.

Code Listing 16-4.

Code Listing 16-4 has a few simple changes from the code in Code Listing 16-3. The font-size was increased in the global style sheet to make the effect easier to see. The wave filter was added to the doFilt function by including the filter name and its arguments on the same line as the glow filter. Notice that a semicolon and a space separate the filters. Without these characters, only the first filter listed will work properly. Because of these changes to the doFilt function, when the user places the mouse pointer over the text, the glow and wave filters are applied at the same time. You can string together as many filters as you like and apply them to an object, but as you might notice from Figure 16-4, this can affect readability.

Figure 16-4. Applying multiple filters to an object.

Note that the line of code in Code Listing 16-4 that applies the filters has wrapped to two lines in this book's printed text. However, you should type in the code as a single line. An alternative to coding all the filters in one script command is to add each filter sequentially. For example, to combine the glow, flipv, and chroma filters, we could have used the following code:

Now let's get a little fancy with filters. Code Listing 16-5 applies a random colored glow and the wave filter to the text when the onmouseover event occurs. As long as the mouse pointer remains positioned over the text, the value of the wave filter's phase argument is changed over time. This technique creates the effect of viewing the text underwater. When the mouse pointer is moved away from the text, the filters are removed.

Code Listing 16-5.

Several new techniques are demonstrated in Code Listing 16-5. In the doFilt function (called when the mouse passes over the text), a random number from 0 to 3 is generated. This is used to pick a random color out of an array, which is then applied by a glow filter. The anitext function is then called. This function increments the value of the wave filter's phase argument by 10 and then sets a timer that calls the same function again, after 200 milliseconds (one fifth of a second) have passed. These changes continue in an endless loop until all the effects are turned off by the removeFilt function, called by the DIV's onmouseout handler. This function also removes the timer, preventing the anitext function from being called continuously.

These techniques demonstrate only a few of the ways filters can be used to add effects to objects. Objects on your Web page can also be made interactive with transitions.