The Internet Explorer has a number of built-in Dynamic HTML features, such as filters . Filters enable you to support various visual effects; you assign a filter with the filter property of an object's style object. Here's an example showing the available Internet Explorer filters and what they do. When you select a filter using radio buttons and click a button, the filter is applied to some text: (Listing 16-13.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="radio04">Invert <INPUT TYPE="RADIO" NAME="radiobuttons" ID="radio03">Gray <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 16.11, where the code is displaying the glow filter. It's useful to play around with this example to see what kinds of filters there are and what kinds of effects they produce. Figure 16.11. Using filters in the Internet Explorer.
|