JavaScript

Notes from the ZDU JavaScript workshop.

ROLLOVER POP-UPS

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.

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>&nbsp;

Note that you will also need:


	<BR>
	<IMG SRC="images/pu_blank.gif" NAME="popupImg" BORDER="0">
	<BR>

blank image

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.