The Filters Demo Tool: The Main Function

The Filters Demo Tool

The Main Function

The main function of the tool is changeFilter(). We call it every time the user selects another filter. We first find out the currently-selected filter:

var selectObject = oSelect;
var selectedValue =
 selectObject.options[selectObject.selectedIndex].value;

We then assign the background and text color of the filtered image:

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';

We then verify that the filter is not empty:

if (selectedValue != "empty") {

And only then comes the main loop in which we check which filter it is and act accordingly. Once we identify a filter, we perform two actions. First, we copy the innerHTML code of the hidden object to the common oControlsSpan object. The second task is to assemble the HTML code and copy it to the output window. Here is the if clause for the Chroma filter:

else if (selectedValue.indexOf('Chroma')!=-1) {
            oControlsSpan.innerHTML = oChromaControls.innerHTML;
            chromaFilterChange();
        }

where oChromaControls is the hidden control. Here is the if clause for the DropShadow filter:

else if (selectedValue.indexOf('DropShadow')!=-1) {
            imgObj.style.backgroundColor='';
            oControlsSpan.innerHTML = oDropShadowControls.innerHTML;
            dropShadowFilterChange();
        }

Notice we emptied the background parameter to emphasize the filter effect on a non-backgrounded text. Consult the appended listing for the full changeFilter() function.

Next: How to assemble the HTML code for a filter

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/4.html