Fix the Bug

There is a bug in the previous script. Notice what happens when you move the cursor from the page two button to the page three button. The page one button flashes from the on position to the off position. It happens in an instant and is only a minor problem, but it could be better.

Why does that happen? When you move the mouse from the "Page Two" button to the "Page Three" button, the "Page Two" button's onMouseOut event handler is triggered, so the "Page One" button becomes active (it's the default button). A millisecond later, the "Page Three" button's onMouseOver event handler is triggered, making the "Page One" button inactive. Within one millisecond, the "Page One" button becomes active and then inactive again.

This bug can be fixed by making a few changes to the actMenuItem() and inactMenuItem():

var isMenuAct = false; // the menu is not active yet
function actMenuItem(imgName) {

isMenuAct = true; // the menu is now active
act(imgName);
inact(defImg);

You use the setTimeout() function to suspend the following action by one millisecond. That is, after one millisecond, if the menu is still not active, the default image, the "Page One" button in our examples, becomes active. If the user moves the cursor from the "Page Two" button to the "Page Three" button, the "Page Three" button's onMouseOver event handler invokes the actMenuItem() function, which assigns true to the variable isMenuAct . Thus, the "Page Two" button's onMouseOut event handler, which invokes the inactMenuItem() function, does not activate the "Page One" button due to the time delay. Here is the event handlers the default image should have:

<A HREF="nowhere.html"
onMouseOver="isMenuAct = true; act('img2')">
<IMG SRC="pageone-on.gif"
HEIGHT="50" WIDTH="161"
NAME="img2" ALT="page One" BORDER="0"></A>>

The onMouseOver event handler assigns true to the isMenuAct variable and then activates the "Page One" button. If we omitted this event handler, the script would work fine, but it would take one millisecond for the "Page One" button to become active when the user moves the pointer to the "Page One" button. This event handler ensures that the "Page One" button becomes active immediately.

Here is script at work