Enhanced buttons

We often think of HTML buttons as being rather function-light as compared to VisualBasic command buttons.

Taking normal buttons - rather than submit buttons, for instance - and adding some very basic JavaScript to their events can enhance their functionality. This doesn't work in Opera.

In this example, the three buttons have increasing functionality as you move from Button 1 to Button 3. Try pointing at each with your mouse. The code for each is triggered by the onMouseOver event. In practice you would usually reverse the displays when onMouseOut was triggered but in this example, to maintain the display, the text updates are reversed by clicking on the text box.

The key to the display updates is code associated with the onMouseOver event, as shown here for Button 1

This code framework is replicated for each button.

The function called updates the contents of the text area below the buttons:

    function Menu1(form)
    {
        form.TXTVal.value="Button 1 shows this message when the mouse passes over" + ClearMessage;
    }

Note that the parameter this.form - the identifier for the form - is passed to the function from the onMouseOver event so that the text area in the form can be properly identified in the script, using form.TXTVal.val. ClearMessage is a variable containg the prompt to Click on this text box to clear messages and status line, preceeded by a couple of new-lines.

Pointing at Button 3 does much the same updates as Button 2 but clicking on it changes the window location to the site map page (sitemap.htm). This is done using attached JavaScript rather than calling a function. It emulates a HTML hyperlink.

Clicking on the text area clears the display and the status line, again by calling a function. This function simply writes a null string (that is, "") to the text area and the status line.

onClick calls the ClearText function:

    function ClearText(form)
    {
        form.TXTVal.value=""
        window.status="";
    }

See the HTML source of this page to place these in the context of the page.