The Filters Demo Tool: Assembling the Filter's Code

The Filters Demo Tool

Assembling the Filter's Code

Assembling the HTML code is probably the most complicated part of the tool. For each parameter, we need to look at the proper control and extract the user's setting. The tricky part is that for each control we have two copies: the hidden one and the visible one. We need to access the visible one because the user cannot modify the hidden control. The getVisibleObject() function finds the visible copy by verifying that the parent element is the main oControlsSpan object:

function getVisibleObject(controlName) {
   for (x=0; x 

Notice how we iterate over all objects with the same name, controlName. Object no. i is document.all(controlName, i). Once we know the object, we can access its different parameter settings, by name. Let's take the function that assembles the code for the Blur filter:

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();
}

We first find the control for the pixelRadius parameter. If you look in the hidden control area of the code, you'll find that the pull-down menu is named pixelRadiusList. The following line will find this object:

var controlObject = getVisibleObject("pixelRadiusList");

And the following line will extract the user's selection:

var pixelRadius =
 controlObject.options[controlObject.selectedIndex].value;

Similarly, we find the value of shadowOpacity. The third parameter is a checkbox selection which we find by controlObject.checked:

controlObject = getVisibleObject("makeShadowSwitch");
var makeShadow = controlObject.checked;

We finally assemble the command line by writing out the filter specification including the just-found parameters:

var cmd =
 "imgObj.style.filter='progid:DXImageTransform.Microsoft.Blur(
 PixelRadius="+ pixelRadius +"," + "MakeShadow=" + makeShadow + ",
 ShadowOpacity=" + shadowOpacity +")'";

The eval(cmd) command executes the command and applies the filter to the imgObj object. The updateFilterCode() function just copies the outerHTML code from the imgObj object to the designated HTML code area, oCodePre:

function updateFilterCode() {
    oCodePre.innerText=imgObj.outerHTML;
}

Next: How to initialize the tool

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

URL: https://www.webreference.com/js/column69/5.html