The filters Property
The filters PropertyIn the Internet Explorer, the filters property holds an array of filters defined for the current element. Filters support various visual effects, such as drop shadows and blurring. You can see the support for this property in Table 5.21. Table 5.21. The filters Property
We'll see more on filters in Chapter 16, "Dynamic HTML: Changing Web Pages On-the-Fly," but here's a preview; this web page enables you to play with various filters, applying them to some text: (Listing 05-12.html on the web site) <HTML> <HEAD> <TITLE> Using Filters </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function applyFilter() { div1.style.filter="" if (document.form1.radio01.checked) { div1.style.filter = "fliph(enabled=1)" } if (document.form1.radio02.checked) { div1.style.filter = "flipv(enabled=1)" } if (document.form1.radio03.checked) { div1.style.filter = "gray(enabled=1)" } if (document.form1.radio04.checked) { div1.style.filter = "invert(enabled=1)" } if (document.form1.radio05.checked) { div1.style.filter = "xray(enabled=1)" } if (document.form1.radio06.checked){ var opacityValue = document.form1.opacity.value div1.style.filter = "alpha(opacity=" + opacityValue + ", enabled=1)" } if (document.form1.radio07.checked) { div1.style.filter = "blur(direction=45, strength=15, add=0, enabled=1)" } if (document.form1.radio08.checked) { div1.style.filter = "chroma(color=#FFFF00, enabled=1)" } if (document.form1.radio09.checked) { div1.style.filter = "dropshadow(offx=5, offy=9, " + "color=#008fff, enabled=1)" } if (document.form1.radio10.checked) { div1.style.filter = "glow(strength=5, color=#ffff00, " + "enabled=1) " } if (document.form1.radio11.checked) { div1.style.filter = "mask(color=#FF0000 ,enabled=1)" } if (document.form1.radio12.checked) { div1.style.filter = "shadow(color=#FF0088, direction=320, enabled=1)" } if (document.form1.radio13.checked) { div1.style.filter = "wave(freq=2, strength=6, phase=0, " + "lightstrength=0, add=0, enabled=1)" } } // --> </SCRIPT> </HEAD> <BODY> <H1>Using Filters</H1> <FORM NAME="form1"> <INPUT TYPE="RADIO" NAME="radiobuttons" ID="radio01">Flip Horizontal <INPUT TYPE="RADIO" NAME="radiobuttons" ID="radio02">Flip Vertical <INPUT TYPE="RADIO" NAME="radiobuttons" ID="radio03">Gray <INPUT TYPE="RADIO" NAME="radiobuttons" ID="radio04">Invert <INPUT TYPE="RADIO" NAME="radiobuttons" ID="radio05">XRay <BR> <BR> <INPUT TYPE="RADIO" NAME="radiobuttons" ID="radio07">Blur <INPUT TYPE="RADIO" NAME="radiobuttons" ID="radio08">Chroma <INPUT TYPE="RADIO" NAME="radiobuttons" ID="radio09">Drop Shadow <INPUT TYPE="RADIO" NAME="radiobuttons" ID="radio10">Glow <INPUT TYPE="RADIO" NAME="radiobuttons" ID="radio11">Mask <BR> <BR> <INPUT TYPE="RADIO" NAME="radiobuttons" ID="radio12">Shadow <INPUT TYPE="RADIO" NAME="radiobuttons" ID="radio13">Wave <INPUT TYPE="RADIO" NAME="radiobuttons" ID="radio06"> Alpha Opacity: <INPUT TYPE="TEXT" ID="opacity" VALUE="60" SIZE="3" MAXLENGTH="3"> <BR> <INPUT TYPE="BUTTON" NAME="startFilter" VALUE="Apply Filter" onclick="applyFilter()"> </FORM> <DIV ID="div1" STYLE="POSITION:absolute; WIDTH:250; HEIGHT:100; TOP:220; LEFT:30; font-size:24pt;font-family:arial; font-style:bold; color:red;"> Here is the text! </DIV> </BODY> </HTML> You can see the results in Figure 5.9, where I've applied a shadow filter to some text. More on filters in Chapter 16. Figure 5.9. Using filters. | ||||||||||||||||||||||||||||||||||||||||||||
