The Main Function

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