JavaScript
Rollover Popups
Notes from the ZDU JavaScript workshop.
Creating a set of popup images that appear/disappear on mouse rollovers/rollouts.
How it works
A blank (transparent GIF) image is displayed when you load the page. When you mouse over a button, a preloaded Home popup image replaces the blank image. When you move the mouse away, the blank image replaces the popup.
Pre-loading the popups
The JS code that preloads the blank (pu_blank.gif) and Home (pu_home.gif) popup images is as follows:
if (document.images)
{
// browser supports Image object, so preload all images
pu_blank = new Image()
pu_blank.src = "images/pu_blank.gif" // blank popup image
pu_home = new Image()
pu_home.src = "images/pu_home.gif" // HOME popup image
...
}
else
{
// browser does NOT support Image object, so set all image vals to ""
// to prevent errors from arising in onMouseOver/onMouseOut handlers
pu_blank = ""; pu_home = ""
...
}
code for the buttons
The JS/HTML code for the Home button is as follows:
<!-- Home button -->
<a href="javascript:void(0)"
onMouseOver="document.homeImg.src=home_on.src;
document.popupImg.src=pu_home.src;
window.status='Home Page'; return true"
onMouseOut="document.homeImg.src=home.src;
document.popupImg.src=pu_blank.src;">
<img src="images/home.gif" name="homeImg" border="0"></a>
Note that you will also need:
<img src="images/pu_blank.gif" name="popupImg" border="0">
The IMG tag defines an image named homeImg and sets its SRC value to
that of the unlit Home button image file (home.gif).
The onMouseOver handler toggles the Home button image
(document.homeImg.src) to the preloaded lit image (home_on.src),
and the blank popup image (document.popupImg.src) to the preloaded Home
popup (pu_home.src).
The onMouseOut handler "undoes" the two onMouseOver toggles, toggling
the Home button image back to the unlit image and the Home popup image
back to the blank popup image.
