Filters


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&nbsp;&nbsp;&nbsp;Opacity:&nbsp;              <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.

graphics/16fig11.gif



Inside Javascript
Inside JavaScript
ISBN: 0735712859
EAN: 2147483647
Year: 2005
Pages: 492
Authors: Steve Holzner

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