The User Interface

Let's familiarize ourselves with the filtered HTML element:

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

The outer container is a SPAN element which contains the image in a nested SPAN element and a text message within a nested DIV element. The objects to remember here are imgObj and imgObjText which we both manipulate within the tool.

The other important HTML element is the visible control (oControlsSpan) that we assign its innerHTML from the invisible control. It is included in the outer oControlPanel element:

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

Notice the event handler changeFilter(). We call it every time the user changes the selection of the filter, onchange=changeFilter(). The rest of the HTML code includes decorative rulers and headers and can be found in the listings. The HTML code is written to the oCodeSpan element.

Next: How to write the main function