JavaScript
Three-State Rollover Buttons
Notes from the ZDU JavaScript workshop.
Third State
This is the selected state, to show that this is the currently displayed page. This button does not toggle between lit/unlit; the others do.
Pre-loading Images
As with the other 2 states, the selected-state Home button image (home_sel.gif) needs to be loaded:
if (document.images)
{
// browser supports Image object, so preload all images
...
home_sel = new Image()
home_sel.src = "images/home_sel.gif" // selected HOME image
...
Showing the current page's button as selected
In the HTML/JS code following, the IMG tag defines an image named homeImg and sets its SRC value to that of the selected-state Home button image file (home_sel.gif), causing the selected version of the button to be loaded with the document. The onMouseOver handler displays a status-bar message. There is no image toggling on this button.
onMouseOver="window.status='Home Page'; return true">
Button 3 below is selected.
