Filters

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

Filter Visual Effect
Alpha Sets the level of opacity, or transparency, of an object
Blur Directionally blurs an object, creating a sense of movement
Chroma Renders a particular color on an object transparent
DropShadow Creates a copy of an object, with a specified directional offset, giving the appearance of a shadow
FlipH Renders a horizontal mirror image of an object
FlipV Renders a vertical mirror image of an object
Glow Creates a luminescence around an object
Grayscale Removes all color information from an object, rendering the object in grays
Invert Reverses the hue, saturation, and brightness of an object, producing an effect somewhat like a photo negative
Light Creates the impression of a light source being projected onto an object
Mask Renders a transparent mask from an object
Shadow Paints a silhouette of an object, with a specified offset, creating a shadow effect
Wave Creates the appearance of waves on an object
X-ray Displays only the outside border of an object

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.

 <HTML> <HEAD> <TITLE>Listing 16-1</TITLE> <STYLE>   DIV {width: 100%;font: 32pt Arial bold} </STYLE> </HEAD> <BODY> <DIV STYLE="filter: blur(add=1, direction=135, strength=5)"> This DIV has the blur filter applied. </DIV> <DIV> This DIV does not. </DIV> </BODY> </HTML> 

click to view at full size.

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.

 <HTML> <HEAD> <TITLE>Listing 16-2</TITLE> </HEAD> <BODY> <IMG SRC="car.gif"> This image uses no filters.<BR> <IMG SRC="car.gif"      STYLE="filter:alpha(opacity=70, finishopacity=0, style=1)"> This image uses the alpha filter.<BR> <IMG SRC="car.gif"      STYLE="filter:flipv"> This image uses the flipv filter.<BR> <IMG SRC="car.gif"      STYLE="filter:glow(color=blue)"> This image uses the glow filter.<BR> <IMG SRC="car.gif"      STYLE="filter:chroma(color=red)"> This image uses the chroma filter.<BR> <IMG SRC="car.gif"      STYLE="filter:wave(strength=6, freq=4, lightstrength=25)"> This image uses the wave filter.<BR> </BODY> </HTML> 

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.

click to view at full size.

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:

     object.style.filter="glow(color=red)" 

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.

 <HTML> <HEAD> <TITLE>Listing 16-3</TITLE> <STYLE>   DIV {width:100} </STYLE> <SCRIPT LANGUAGE="JavaScript"> function addFilt(oWhich){   oWhich.style.filter="glow(color=red, strength=2)" } function removeFilt(oWhich){   oWhich.style.filter=" " } </SCRIPT> </HEAD> <BODY> <DIV onmouseover="addFilt(this)" onmouseout="removeFilt(this)"> Mouse over me! </DIV> <DIV onmouseover="addFilt(this)" onmouseout="removeFilt(this)"> Mouse over me! </DIV> <DIV onmouseover="addFilt(this)" onmouseout="removeFilt(this)"> Mouse over me! </DIV> <DIV onmouseover="addFilt(this)" onmouseout="removeFilt(this)"> Mouse over me! </DIV> </BODY> </HTML> 

click to view at full size.

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.

 <HTML> <HEAD> <TITLE>Listing 16-4</TITLE> <STYLE>   DIV {width:250;font-size:36} </STYLE> <SCRIPT LANGUAGE="JavaScript"> function addFilt(oWhich){   oWhich.style.filter="glow(color=red, strength=5); wave(freq=3,       lightstrength=50, phase=0, strength=2)" } function removeFilt(oWhich){   oWhich.style.filter=" "; } </SCRIPT> </HEAD> <BODY> <DIV onmouseover="addFilt(this)" onmouseout="removeFilt(this)"> Mouse over me! </DIV> <DIV onmouseover="addFilt(this)" onmouseout="removeFilt(this)"> Mouse over me! </DIV> <DIV onmouseover="addFilt(this)" onmouseout="removeFilt(this)"> Mouse over me! </DIV> <DIV onmouseover="addFilt(this)" onmouseout="removeFilt(this)"> Mouse over me! </DIV> </BODY> </HTML> 

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.

click to view at full size.

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:

     oWhich.style.filter=("glow(color=red, strength=5); " +                          "flipv(); " +                          "chroma(color=black)") 

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.

 <HTML> <HEAD> <TITLE>Listing 16-5</TITLE> <STYLE>   DIV {width: 250; font-size: 24pt; font-weight: bold;} </STYLE> <SCRIPT LANGUAGE="JavaScript"> var count=0; var thePhase=0; var aniOn=0; var colorList=new Array("red", "blue", "green"); //this function changes the wave filter phase  function anitext(){   thePhase=(thePhase + 10)   MyDiv.filters[0].phase=thePhase   // the next line causes this function to be called 5 times/second   oTO=window.setTimeout("anitext()",0200,"JavaScript") } function doFilt(){   MyDiv.style.filter="wave(add=0, freq=3, lightstrength=50, phase=0, strength=2, enabled=1); "   rndNum=Math.floor(Math.random() * 3)   MyDiv.style.filter+="glow(color=" + colorList[rndNum] + ", strength=5)"   anitext() } function removeFilt(){   window.clearTimeout(oTO)   MyDiv.style.filter=" "} </SCRIPT> </HEAD> <BODY> <DIV ID="MyDiv" onmouseover="doFilt()" onmouseout="removeFilt()"> Demonstration of dynamic filters </DIV> </BODY> </HTML> 

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.



Dynamic HTML in Action
Dynamic HTML in Action
ISBN: 0735605637
EAN: 2147483647
Year: 1999
Pages: 128

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net