The onMouseOver and onMouseOut Events

The color of the blue ball will be changed any time the mouse cursor is put over the green button:

This is achieved by using two event handlers, each calling its own function:

The implementation of these functions is straightforward:

function LampOn()
{
   document.images[0].src = "ballred.gif"
}

function LampOff()
{
   document.images[0].src = "ballblue.gif"
}

The color of the button under the mouse cursor changes:

The implementation is similar. For each button image (image numbers 2 to 6) we use an instruction like this, shown for the top button:

<img alt="" src="butblue.gif" onmouseover="ButRed(2)"
                              onmouseout="ButBlue(2)" />

... and a pair of functions that take the image number as a parameter and modify the button color accordingly:

function ButRed(i)
{
   document.images[i].src = "butred.gif";
}

function ButBlue(i)
{
   document.images[i].src = "butblue.gif";
}