JavaScript

Notes from the ZDU JavaScript workshop.

Status Button ROllovers

Toggling images

The "classic" two-state button rollovers are also known as toggling images. When you roll over a button, its original image is replaced by a new image. In order to make this image swapping appear to occur so quickly that it appears instantaneous, it is best to pre-load the images, if the browser will allow it. IE3.0 does not allow image swapping. The images being swapped should all be the same size.

Pre-loading Images

The following is included after the title (and before the </head>).


	 <SCRIPT LANGUAGE="JavaScript">

	<!-- start JS hide

	if (document.images)

	{

	// browser supports Image object, so preload all images 

	home = new Image()
		               
		// create separate image object 

	home.src = "images/home.gif" 
		     
		// assign unlit HOME image to it

	home_on = new Image() 
		            
		// create separate image object 

	home_on.src = "images/home_on.gif" // assign lit HOME image to it 

	info = new Image()
		               
		// create separate image object 

	info.src = "images/info.gif"
		     
		// assign unlit INFO image to it

	info_on = new Image() 
		            
		// create separate image object 

	info_on.src = "images/info_on.gif" // assign lit INFO image to it 

	}

	else

	{

	// browser does NOT support Image object, so set all image values to ""

	// to prevent errors from arising in onMouseOver/onMouseOut handlers

	home = ""; home_on = ""

	info = ""; info_on = ""

	document.homeImg = ""; document.infoImg = ""

	}

	// end JS hide --> 

	</SCRIPT>

Toggling a button when the mouse goes over it

In the HTML/JS code following, the IMG tag defines an image named homeImg and sets its SRC value to that of home.gif, so the unlit Home button appears when the document is loaded. The onMouseOver handler sets the src property of homeImg (document.homeImg.src) to the src property home_on.src, making the button appear lit.


	 <!-- Home button -->

	<A HREF="javascript:void(0)"

	onMouseOver="document.homeImg.src=home_on.src;

	window.status='Home Page'; return true">

	<IMG SRC="images/home.gif" NAME="homeImg" BORDER="0"></A>

Toggling a button back when the mouse leaves it

In the HTML/JS code following, the onMouseOut handler sets the src property of infoImg (document.infoImg.src) to the src property info.src, making the button appear unlit.


	 <!-- Info button -->

	<A HREF="javascript:void(0)"

	onMouseOver="document.infoImg.src=info_on.src;

	window.status='Info Page'; return true"

	onMouseOut="document.infoImg.src=info.src">

	<IMG SRC="images/info.gif" NAME="infoImg" BORDER="0"></A>&nbsp;