The Filters Demo Tool: The Code | WebReference

The Filters Demo Tool: The Code


The Filters Demo Tool

The Code

<HTML>
<HEAD>
<TITLE>Filters Demo Tool</TITLE>
<STYLE>
IMG {border:2px solid black}
BODY{ 
margin:0;
background:white;
font-family:verdana;
font-size:80%;
}
.bar{
background:#336699;
width:100%;
height:30px;
border-top:1px solid #99CCFF;
border-bottom:1px solid #000000;
font-size:15pt;
color:white;
padding-left:10px;
}
.desbar{
background:#FFFFFF;
width:100%;
padding: 10px;
border-top:1px solid #CCCCCC;
border-bottom:1px solid #000000;
color:black; 
font-size:8pt;
}
SELECT { font-size:9pt; border:2px; }
</STYLE>
<SCRIPT LANGUAGE="javascript">
var startImage = "sunset.jpg"; 
function displayDefaultFilter() {
    oImg.src=startImage;
    changeFilter();
    updateFilterCode();
}
function getVisibleObject(controlName) {
   for (x=0; x < 2; x++) {
       objTemp = document.all(controlName,x);
       if (objTemp.parentElement.id == "oControlsSpan") {
           return(objTemp);
       }
    }
}
function disableControlObject(controlName) {
   for (x=0; x < 2; x++) {
      document.all(controlName,x).disabled=true;
    }
}
function enableControlObject(controlName) {
   for (x=0; x < 2; x++) {
      document.all(controlName,x).disabled=false;
    }
}
function changeFilter() {
    var selectObject = oSelect;
    var selectedValue = selectObject.options[selectObject.selectedIndex].value;
    imgObjText.innerHTML = "<BR>This filtered SPAN includes the football image, dark red text, and usually sky blue background.";
    imgObj.style.backgroundColor='skyblue';
    imgObj.style.color='darkred';
    if (selectedValue != "empty") {
        if (selectedValue.indexOf('Alpha')!=-1) {
	        oControlsSpan.innerHTML = oAlphaControls.innerHTML;
	        alphaFilterChange();
        }
		else if (selectedValue.indexOf('BasicImage')!=-1) {
            oControlsSpan.innerHTML = oBasicImageControls.innerHTML;
            basicImageFilterChange();
        }
		else if (selectedValue.indexOf('Chroma')!=-1) {
            oControlsSpan.innerHTML = oChromaControls.innerHTML;
            chromaFilterChange();
        }
		else if (selectedValue.indexOf('DropShadow')!=-1) {
            imgObj.style.backgroundColor='';        
            oControlsSpan.innerHTML = oDropShadowControls.innerHTML;
            dropShadowFilterChange();
        }
        else if (selectedValue.indexOf('Emboss')!=-1) {
            oControlsSpan.innerHTML = "";
            embossFilterChange();
        }
        else if (selectedValue.indexOf('Engrave')!=-1) {
            oControlsSpan.innerHTML = "";
            engraveFilterChange();
        }
		else if (selectedValue.indexOf('Glow')!=-1) {
            oControlsSpan.innerHTML = oGlowControls.innerHTML;
            glowFilterChange();
        }
		else if (selectedValue.indexOf('MotionBlur')!=-1) {
            oControlsSpan.innerHTML = oMotionBlurControls.innerHTML;
            motionBlurFilterChange();
        }
		else if (selectedValue.indexOf('Blur')!=-1) {
            imgObj.style.backgroundColor='';        
            oControlsSpan.innerHTML = oBlurControls.innerHTML;
            blurFilterChange();
        }
        else if (selectedValue.indexOf('Pixelate')!=-1) {
            oControlsSpan.innerHTML = oPixelateFilterControls.innerHTML;
            pixelateFilterChange();
        }
		else if (selectedValue.indexOf('Shadow')!=-1) {
            oControlsSpan.innerHTML = oShadowFilterControls.innerHTML;
            shadowFilterChange();
        }
		else if (selectedValue.indexOf('Wave')!=-1) {
            oControlsSpan.innerHTML = oWaveFilterControls.innerHTML;
            waveFilterChange();
        }
        else {
            imgObj.style.filter=selectedValue;
            oControlsSpan.innerHTML = '';
        }
    }
    else {
          alert("Errors in main menu");
    }
    updateFilterCode();       
}
function updateFilterCode() {
    oCodePre.innerText=imgObj.outerHTML;
}
function alphaFilterChange(){
    var cmd;
	var controlObject = getVisibleObject("styleList");
    var style = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getVisibleObject("opacityList");
    var opacity = controlObject.options[controlObject.selectedIndex].value;
    cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Alpha( " ;
    cmd  = cmd + "style=" + style + ",opacity=" + opacity ;
    if (style!=0){
        controlObject = getVisibleObject("finishOpacityList");
        enableControlObject("finishOpacityList");
        var finishOpacity = controlObject.options[controlObject.selectedIndex].value;
        
        cmd  = cmd + ",finishOpacity=" + finishOpacity ;
        if (style==1){
            controlObject = getVisibleObject("startXList");
            enableControlObject("startXList");
            var startX = controlObject.options[controlObject.selectedIndex].value;
            controlObject = getVisibleObject("finishXList");
            enableControlObject("finishXList");
            var finishX = controlObject.options[controlObject.selectedIndex].value;
            controlObject = getVisibleObject("startYList");
            enableControlObject("startYList");
            var startY = controlObject.options[controlObject.selectedIndex].value;
            controlObject = getVisibleObject("finishYList");
            enableControlObject("finishYList");
            var finishY = controlObject.options[controlObject.selectedIndex].value;
            cmd  = cmd + ",startX=" + startX + ",finishX=" + finishX ;
            cmd  = cmd + ",startY=" + startY + ",finishY=" + finishY;
        }
        else{
            disableControlObject("startXList");
            disableControlObject("finishXList");
            disableControlObject("startYList");
            disableControlObject("finishYList");
        }
        
    } 
    else{
        disableControlObject("finishOpacityList");
        disableControlObject("startXList");
        disableControlObject("finishXList");
        disableControlObject("startYList");
        disableControlObject("finishYList");
    }
   
    cmd  = cmd + ")'";
    eval(cmd);
    updateFilterCode();
}
function basicImageFilterChange(){
    var cmd;
    var controlObject = getVisibleObject("rotationList");
    var rotation = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getVisibleObject("mirrorSwitch");
    controlObject.checked==true ? mirror = 1 : mirror = 0
    controlObject = getVisibleObject("invertSwitch");
    controlObject.checked==true ? invert = 1 : invert = 0
    controlObject = getVisibleObject("xraySwitch");
    controlObject.checked==true ? xray = 1 : xray = 0
    controlObject = getVisibleObject("grayscaleSwitch");
    controlObject.checked==true ? grayscale = 1 : grayscale = 0
    controlObject = getVisibleObject("basicImageOpacityList");
    var opacity = controlObject.options[controlObject.selectedIndex].value;
    cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.BasicImage( Rotation="+ rotation +",Mirror=" + mirror + ",Invert=" + invert + ",XRay=" + xray + ",Grayscale=" + grayscale + ",Opacity=" + opacity;
    cmd = cmd + ")'";
    eval(cmd);
    updateFilterCode();
}
function blurFilterChange(){
    var controlObject = getVisibleObject("pixelRadiusList");
    var pixelRadius = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getVisibleObject("shadowOpacityList");
    var shadowOpacity = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getVisibleObject("makeShadowSwitch");
    var makeShadow = controlObject.checked;
    var cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Blur( PixelRadius="+ pixelRadius +"," + "MakeShadow=" + makeShadow + ",ShadowOpacity=" + shadowOpacity +")'";
    eval(cmd);
    updateFilterCode();
}
function chromaFilterChange(){
    var controlObject = getVisibleObject("chromaColorList");
    var chromaColor = controlObject.options[controlObject.selectedIndex].value;
    var cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Chroma( Color="+ chromaColor +")'";
    eval(cmd);
    updateFilterCode();
}
function dropShadowFilterChange(){
    var controlObject = getVisibleObject("shadowColorList");
    var shadowColor = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getVisibleObject("offsetXList");
    var offX = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getVisibleObject("offsetYList");
    var offY = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getVisibleObject("positiveSwitch");
    var positive = controlObject.checked;
    var cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.dropShadow( Color=" + shadowColor + ",offX=" + offX + ",offY=" + offY + ",positive=" + positive + ")'";
    eval(cmd);
    updateFilterCode();
}
function embossFilterChange(){
    var cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Emboss()'"; 
    eval(cmd);
    updateFilterCode();
}
function engraveFilterChange(){
    var cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Engrave( )'"; 
    eval(cmd);
    updateFilterCode();
}
function glowFilterChange(){
    var controlObject = getVisibleObject("color");
    var color = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getVisibleObject("strength");
    var strength = controlObject.options[controlObject.selectedIndex].value;
    var cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Glow( Color="+ color +"," + "Strength=" + strength + ")'";
    eval(cmd);
    updateFilterCode();
}
function motionBlurFilterChange(){
    var controlObject = getVisibleObject("Strength");
    var strength = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getVisibleObject("Direction");
    var direction = controlObject.options[controlObject.selectedIndex].value;
	controlObject = getVisibleObject("addSwitch");
    var add = controlObject.checked;
    var cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.motionBlur( Strength=" + strength + ",Direction=" + direction + ",Add=" + add + ")'";
    eval(cmd);
    updateFilterCode();
}
function pixelateFilterChange(){
    var controlObject = getVisibleObject("maxSquareFList");
    var maxSquare = controlObject.options[controlObject.selectedIndex].value;
    var cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Pixelate( maxsquare="+ maxSquare  +")'";
    eval(cmd);
    updateFilterCode();
}
function shadowFilterChange(){
    var controlObject = getVisibleObject("Color");
    var color = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getVisibleObject("Direction");
    var direction = controlObject.options[controlObject.selectedIndex].value;
	controlObject = getVisibleObject("Strength");
    var strength = controlObject.options[controlObject.selectedIndex].value;
	var cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Shadow( Color=" + color + ",Direction=" + direction + ",Strength=" + strength + ")'";
    eval(cmd);
    updateFilterCode();
}
function waveFilterChange(){
    var controlObject = getVisibleObject("LightStrength");
    var lightStrength = controlObject.options[controlObject.selectedIndex].value;
    controlObject = getVisibleObject("Strength");
    var strength = controlObject.options[controlObject.selectedIndex].value;
	controlObject = getVisibleObject("Phase");
    var phase = controlObject.options[controlObject.selectedIndex].value;
	controlObject = getVisibleObject("Freq");
    var freq = controlObject.options[controlObject.selectedIndex].value;
	controlObject = getVisibleObject("addSwitch");
    var add = controlObject.checked;
	var cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Wave( LightStrength=" + lightStrength + ",Strength=" + strength + ",Phase=" + phase + ",Freq=" + freq + ",Add=" + add + ")'";
    eval(cmd);
    updateFilterCode();
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF" onload="displayDefaultFilter()">
<!-- Title and Description -->
<DIV CLASS="bar" STYLE="POSITION:relative; TEXT-ALIGN: center; TOP:0; LEFT:0; Z-INDEX:10">Filters Demo Tool</DIV>
<DIV CLASS="desbar" STYLE="height:0">
<!-- Rendered content -->
<SPAN ID="oLiveSpan" style="POSITION: absolute; TOP: 45px;  LEFT:310px; WIDTH: 400px; " >
  <SPAN ID="imgObj" STYLE="WIDTH:405; HEIGHT:280; FONT:bold 9pt verdana; LINE-HEIGHT:1.3; PADDING-LEFT:13px; PADDING-RIGHT:20px"><IMG ID="oImg"  ALIGN="left" STYLE="margin:8px;">
    <DIV ID="imgObjText">
    </DIV>
  </SPAN>
</SPAN>
<!-- Control Panel -->
<SPAN ID="oControlPanel" STYLE="LEFT: 0px; POSITION: relative; TOP: -10; WIDTH: 300; HEIGHT: 350; PADDING-TOP: 5px; PADDING-RIGHT: 5px; PADDING-BOTTOM: 60px; PADDING-LEFT: 15px; Z-INDEX: 5; ">
  <BR>
<SPAN id=filterSection>
Select a filter: 
<SELECT ID=oSelect onchange=changeFilter()> 
  <OPTION value=progid:DXImageTransform.Microsoft.Alpha SELECTED>Alpha</OPTION>
  <OPTION value=progid:DXImageTransform.Microsoft.BasicImage >BasicImage</OPTION> 
  <OPTION value=progid:DXImageTransform.Microsoft.Blur>Blur</OPTION> 
  <OPTION value=progid:DXImageTransform.Microsoft.Chroma>Chroma</OPTION> 
  <OPTION value=progid:DXImageTransform.Microsoft.DropShadow>DropShadow</OPTION> 
  <OPTION value=progid:DXImageTransform.Microsoft.Emboss >Emboss</OPTION> 
  <OPTION value=progid:DXImageTransform.Microsoft.Engrave>Engrave</OPTION> 
  <OPTION value=progid:DXImageTransform.Microsoft.Glow>Glow</OPTION>
  <OPTION value=progid:DXImageTransform.Microsoft.MotionBlur>MotionBlur</OPTION>
  <OPTION value=progid:DXImageTransform.Microsoft.Pixelate>Pixelate</OPTION>
  <OPTION value=progid:DXImageTransform.Microsoft.Shadow>Shadow</OPTION>
  <OPTION value=progid:DXImageTransform.Microsoft.Wave>Wave</OPTION>
  </SELECT><hr></SPAN>  
  <SPAN ID="oControlsSpan">
  </SPAN>
</SPAN>
</DIV>
<!-- Copy Code Bar -->
<SPAN BGCOLOR="#DDDDDD" CLASS="bar" STYLE="POSITION: relative; Z-INDEX:10; HEIGHT: 35px; LEFT: 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px;  TEXT-ALIGN: center; TOP: 0px; WIDTH: 100%;">Copy Code from Here and Paste in your Document
</SPAN>
<!-- Code -->
<SPAN ID=oCodeSpan style="position:relative; FONT-FAMILY: courier new; FONT-SIZE: 9pt; LINE-HEIGHT:1.5;  LEFT: 0px; TOP: 0px; WIDTH: 100%; PADDING-TOP: 22px; PADDING-RIGHT: 5px; PADDING-BOTTOM: 22px; PADDING-LEFT: 5px; OVERFLOW: scroll; Z-INDEX: 4; HEIGHT:30%;">
  <SPAN ID="oCodePre" STYLE=" HEIGHT: 100%; WIDTH: 95%">
  </SPAN>
</SPAN>
  
<!--Alpha  -->
<SPAN id=oAlphaControls style="DISPLAY: none"><BR/>
Style: 
<SELECT onchange=alphaFilterChange() name=styleList id="styleList"> 
<OPTION value=0>0 - Uniform Opacity</OPTION> 
<OPTION value=1 SELECTED>1 - Linear Opacity Change</OPTION> 
<OPTION value=2>2 - Radial Opacity Change</OPTION> 
<OPTION value=3>3 - Rectangular Opacity Change</OPTION>
</SELECT>  <BR/><BR/>
Opacity: 
<SELECT onchange=alphaFilterChange() name=opacityList> 
<OPTION value=0>0</OPTION> 
<OPTION value=25 SELECTED>25</OPTION>
<OPTION value=50>50</OPTION> 
<OPTION value=75>75</OPTION> 
<OPTION value=100>100</OPTION>
</SELECT>
   FinishOpacity: 
<SELECT onchange=alphaFilterChange() name=finishOpacityList> 
<OPTION value=0>0</OPTION> 
<OPTION value=25>25</OPTION>
<OPTION value=50>50</OPTION> 
<OPTION value=75>75</OPTION> 
<OPTION value=100 SELECTED>100</OPTION>
</SELECT> <BR/><BR/> 
StartX: 
<SELECT onchange=alphaFilterChange() name=startXList> 
<OPTION value=0 SELECTED>0</OPTION> 
<OPTION value=25>25</OPTION>
<OPTION value=50>50</OPTION> 
<OPTION value=75>75</OPTION> 
<OPTION value=100>100</OPTION>
</SELECT> 
   FinishX: 
<SELECT onchange=alphaFilterChange() name=finishXList> 
<OPTION value=0>0</OPTION> 
<OPTION value=25>25</OPTION>
<OPTION value=50>50</OPTION> 
<OPTION value=75>75</OPTION> 
<OPTION value=100 SELECTED>100</OPTION>
</SELECT> 
<BR/><BR/> 
StartY: 
<SELECT onchange=alphaFilterChange() name=startYList> 
<OPTION value=0>0</OPTION> 
<OPTION value=25>25</OPTION>
<OPTION value=50>50</OPTION> 
<OPTION value=75>75</OPTION> 
<OPTION value=100 SELECTED>100</OPTION>
</SELECT> 
   FinishY: 
<SELECT onchange=alphaFilterChange() name=finishYList> 
<OPTION value=0 SELECTED>0</OPTION> 
<OPTION value=25>25</OPTION>
<OPTION value=50>50</OPTION> 
<OPTION value=75>75</OPTION> 
<OPTION value=100>100</OPTION>
</SELECT>  
</SPAN>
<!--BasicImage -->
<SPAN id=oBasicImageControls style="DISPLAY: none"><BR/>
Rotation: 
<SELECT onchange=basicImageFilterChange() name=rotationList> 
<OPTION value=0 SELECTED>0 - 0 degrees</OPTION> 
<OPTION value=1>1 - 90 degrees</OPTION> 
<OPTION value=2>2 - 180 degrees</OPTION> 
<OPTION value=3>3 - 270 degrees</OPTION>
</SELECT><BR/><BR/>
Opacity: <SELECT onchange=basicImageFilterChange() name=basicImageOpacityList> 
<OPTION value=0.00>0.00</OPTION> 
<OPTION value=0.25>0.25</OPTION> 
<OPTION value=0.50>0.50</OPTION> 
<OPTION value=0.75>0.75</OPTION> 
<OPTION value=1.00 SELECTED>1.00</OPTION>
</SELECT><BR><BR/>
Mirror: <INPUT onclick=basicImageFilterChange() type=checkbox name=mirrorSwitch></INPUT> 
Invert: <INPUT onclick=basicImageFilterChange() type=checkbox name=invertSwitch></INPUT><BR><BR/>
X-Ray: <INPUT onclick=basicImageFilterChange() type=checkbox name=xraySwitch></INPUT> 
Grayscale: <INPUT onclick=basicImageFilterChange() type=checkbox name=grayscaleSwitch></INPUT>
</SPAN>
<!--Blur  -->
<SPAN id=oBlurControls style="DISPLAY: none"><BR/>
PixelRadius: 
<SELECT onchange=blurFilterChange() name=pixelRadiusList> 
<OPTION value=0>0</OPTION> 
<OPTION value=5 SELECTED>5</OPTION> 
<OPTION value=10>10</OPTION> 
<OPTION value=20>20</OPTION>
</SELECT> <BR/><BR/>
MakeShadow: <INPUT onclick=blurFilterChange() type=checkbox name=makeShadowSwitch>
 </INPUT>
<BR><BR>ShadowOpacity: 
<SELECT onchange=blurFilterChange() name=shadowOpacityList> 
<OPTION value=0.00>0.00</OPTION> <OPTION value=0.25>0.25</OPTION>
<OPTION value=0.50>0.50</OPTION> <OPTION value=0.75>0.75</OPTION> 
<OPTION value=1.00 SELECTED>1.00</OPTION>
</SELECT> <BR/><BR/>
</SPAN>
<!--Chroma-->
<SPAN id=oChromaControls style="DISPLAY: none"><BR/>
Color: 
<SELECT onchange=chromaFilterChange() name=chromaColorList> 
<OPTION value='#FFFFFF' SELECTED>White (FFFFFF)</OPTION>
<OPTION value='#87CEEB'>Sky blue (87CEEB)</OPTION>
<OPTION value='#8B0000'>Dark red(8B0000)</OPTION>
<OPTION value='#000000'>Black (000000)</OPTION> 
</SELECT><BR/><BR/><BR/><BR/>
</SPAN>
<!-- DropShadow -->
<SPAN id=oDropShadowControls style="DISPLAY: none"><BR/>
Color: 
<SELECT onchange=dropShadowFilterChange() name=shadowColorList> 
<OPTION value=DDDDDD>Light Gray (DDDDDD)</OPTION> 
<OPTION value=999999 SELECTED>Dark Gray (999999)</OPTION> 
<OPTION value=000000>Black (000000)</OPTION> 
<OPTION value=FFFF00>Yellow (FFFF00)</OPTION> 
<OPTION value=0000FF>Blue (0000FF)</OPTION>
</SELECT>
<BR><BR>
OffX: <SELECT onchange=dropShadowFilterChange() name=OffsetXList> 
<OPTION value=-5>-5</OPTION>
<OPTION value=-3>-3</OPTION>
<OPTION value=-1>-1</OPTION>
<OPTION value=1>1</OPTION>
<OPTION value=3>3</OPTION>
<OPTION value=5 SELECTED>5</OPTION>
</SELECT>
OffY: <SELECT onchange=dropShadowFilterChange() name=OffsetYList> 
<OPTION value=-5>-5</OPTION>
<OPTION value=-3>-3</OPTION>
<OPTION value=-1>-1</OPTION>
<OPTION value=1>1</OPTION>
<OPTION value=3>3</OPTION>
<OPTION value=5 SELECTED>5</OPTION>
</SELECT><BR><BR>
Positive: <INPUT onclick=dropShadowFilterChange() type=checkbox CHECKED name=positiveSwitch></INPUT> 
</SPAN>
<!--Emboss -->
<SPAN id=oEmbossControls style="DISPLAY: none">
</SPAN>
<!--Engrave -->
<SPAN id=oEngraveControls style="DISPLAY: none">
</SPAN>
<!-- Glow -->
<SPAN id=oGlowControls style="DISPLAY: none"><BR/>
Color: 
<SELECT onchange=glowFilterChange() name=Color> 
<OPTION value=DDDDDD>Light Gray (DDDDDD)</OPTION> 
<OPTION value=999999 SELECTED>Dark Gray (999999)</OPTION> 
<OPTION value=000000>Black (000000)</OPTION> 
<OPTION value=FFFF00>Yellow (FFFF00)</OPTION> 
<OPTION value=0000FF>Blue (0000FF)</OPTION>
</SELECT>
<BR><BR>
Strength: <SELECT onchange=glowFilterChange() name=Strength> 
<OPTION value=1>1</OPTION>
<OPTION value=2>2</OPTION>
<OPTION value=3>3</OPTION>
<OPTION value=5>5</OPTION>
<OPTION value=10>10</OPTION>
<OPTION value=25 SELECTED>25</OPTION>
</SELECT><BR><BR><BR/><BR/>
</SPAN>
<!-- MotionBlur -->
<SPAN id=oMotionBlurControls style="DISPLAY: none"><BR/>
Strength: <SELECT onchange=motionBlurFilterChange() name=Strength> 
<OPTION value=0>0</OPTION>
<OPTION value=5>5</OPTION>
<OPTION value=10 SELECTED>10</OPTION>
<OPTION value=20>20</OPTION>
<OPTION value=30>30</OPTION>
<OPTION value=50>50</OPTION>
</SELECT>
<BR><BR>
Direction: <SELECT onchange=motionBlurFilterChange() name=Direction> 
<OPTION value=0 SELECTED>0</OPTION>
<OPTION value=45>45</OPTION>
<OPTION value=90>90</OPTION>
<OPTION value=135>135</OPTION>
<OPTION value=180>180</OPTION>
<OPTION value=225>225</OPTION>
<OPTION value=270>270</OPTION>
<OPTION value=315>315</OPTION>
</SELECT><BR/><BR/>
Add: <INPUT onclick=motionBlurFilterChange() type=checkbox name=addSwitch>
</INPUT><BR><BR><BR/><BR/>
</SPAN>
<!-- Pixelate -->
<SPAN id=oPixelateFilterControls style="DISPLAY: none"><BR/>
MaxSquare:
<SELECT onchange=pixelateFilterChange() name=maxSquareFList> 
<OPTION value=2>2</OPTION> 
<OPTION value=5>5</OPTION> 
<OPTION value=10 SELECTED>10</OPTION> 
<OPTION value=25>25</OPTION> 
<OPTION value=50>50</OPTION>
</SELECT><BR/><BR/><BR/><BR/>
</SPAN>
<BR/><BR/><BR/><BR/>
<!-- Shadow -->
<SPAN id=oShadowFilterControls style="DISPLAY: none"><BR/>
Color: 
<SELECT onchange=shadowFilterChange() name=Color> 
<OPTION value=DDDDDD>Light Gray (DDDDDD)</OPTION> 
<OPTION value=999999 SELECTED>Dark Gray (999999)</OPTION> 
<OPTION value=000000>Black (000000)</OPTION> 
<OPTION value=FFFF00>Yellow (FFFF00)</OPTION> 
<OPTION value=0000FF>Blue (0000FF)</OPTION>
</SELECT>
<BR><BR>
Strength: <SELECT onchange=shadowFilterChange() name=Strength> 
<OPTION value=2>2</OPTION>
<OPTION value=4>4</OPTION>
<OPTION value=8 SELECTED>8</OPTION>
<OPTION value=16>16</OPTION>
<OPTION value=32>32</OPTION>
<OPTION value=50>50</OPTION>
</SELECT><BR><BR>
Direction: <SELECT onchange=shadowFilterChange() name=Direction> 
<OPTION value=0 SELECTED>0</OPTION>
<OPTION value=45>45</OPTION>
<OPTION value=90>90</OPTION>
<OPTION value=135>135</OPTION>
<OPTION value=180>180</OPTION>
<OPTION value=225>225</OPTION>
<OPTION value=270>270</OPTION>
<OPTION value=315>315</OPTION>
</SELECT><BR/><BR/><BR/><BR/>
</SPAN>
<!-- Wave -->
<SPAN id=oWaveFilterControls style="DISPLAY: none"><BR/>
LightStrength: <SELECT onchange=waveFilterChange() name=LightStrength> 
<OPTION value=0 SELECTED>0</OPTION>
<OPTION value=10>10</OPTION>
<OPTION value=20>20</OPTION>
<OPTION value=30>30</OPTION>
<OPTION value=40>40</OPTION>
<OPTION value=50>50</OPTION>
<OPTION value=60>60</OPTION>
<OPTION value=70>70</OPTION>
<OPTION value=80>80</OPTION>
<OPTION value=90>90</OPTION>
<OPTION value=100>100</OPTION>
</SELECT>
Strength: <SELECT onchange=waveFilterChange() name=Strength> 
<OPTION value=0>0</OPTION>
<OPTION value=2>2</OPTION>
<OPTION value=5 SELECTED>5</OPTION>
<OPTION value=10>10</OPTION>
<OPTION value=20>20</OPTION>
<OPTION value=30>30</OPTION>
</SELECT><BR><BR>
Phase: <SELECT onchange=waveFilterChange() name=Phase> 
<OPTION value=0 SELECTED>0</OPTION>
<OPTION value=10>10</OPTION>
<OPTION value=20>20</OPTION>
<OPTION value=30>30</OPTION>
<OPTION value=40>40</OPTION>
<OPTION value=50>50</OPTION>
<OPTION value=60>60</OPTION>
<OPTION value=70>70</OPTION>
<OPTION value=80>80</OPTION>
<OPTION value=90>90</OPTION>
<OPTION value=100>100</OPTION>
</SELECT>
Freq: <SELECT onchange=waveFilterChange() name=Freq> 
<OPTION value=1>1</OPTION>
<OPTION value=3>3</OPTION>
<OPTION value=5 SELECTED>5</OPTION>
<OPTION value=7>7</OPTION>
<OPTION value=9>9</OPTION>
<OPTION value=20>20</OPTION>
</SELECT>
Add: <INPUT onclick=waveFilterChange() type=checkbox name=addSwitch>
</INPUT>
<BR/><BR/><BR/><BR/>
</SPAN>
</BODY>
</HTML>

Next: A Final Word


Produced by Yehuda Shiran and Tomer Shiran
All Rights Reserved. Legal Notices.
Created: September 25, 2000
Revised: September 25, 2000

URL: http://www.webreference.com/js/column69/7.html