Sue's JavaScript

Notes from the ZDU JavaScript workshop.

Three-State Rollover Buttons

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.