raingod >> resources >> JavaScript >> Software >> Button Info Panel  

Button Info Panel [Source]

Last updated: 08.05.2002

This is the source code for the Button Info Panel JavaScript, which animates an information image as part of a navigation control panel. To use this script, save it as plain text and paste it into the header of your page.

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--

// canManipulateImages - check if the browser we're using can do
// clever stuff with document images.

function canManipulateImages() {
	if (document.images)
		return true;
	else
		return false;
}

// displayLCDPanel - display the chosen LCD panel by simply changing
// its 'src' argument. Note that we return 'false', not 'true' from this
// function. This lets the browser know that we haven't done anything
// with the status line, so it's free to stick the URL of the link
// in there, which is what we want. We pass both the name of the image
// we want to change (defined in the HTML code by the NAME attribute)
// and the name of the variable that holds the image we should use to
// replace it.

function displayLCDPanel(target,imageName) {
	if (gImageCapableBrowser) {
		var image = eval(imageName);
		document [target].src = image.src;
		return false;
	}
}

// preLoadImage - pre-create and pre-load an image so that it's ready
// when we want to use it.

function preLoadImage(imageURL) {
	if (gImageCapableBrowser) {
		image = new Image();
		image.src = imageURL;
		return image;
	}
}

// gImageCapableBrowser - is this browser hip to images? Set up
// a global variable so that we don't have to keep calling a function
// (useful if the function becomes costly to compute).

var gImageCapableBrowser = canManipulateImages();

// Set up all the alternative LCD panels we intend to use.

var imageLCDBlank = preLoadImage("inline/panelBlank.jpg");
var imageLCDHome = preLoadImage("inline/panelHome.jpg");
var imageLCDPrevious = preLoadImage("inline/panelPrevious.jpg");
var imageLCDUp = preLoadImage("inline/panelIndex.jpg");
var imageLCDNext = preLoadImage("inline/panelNext.jpg");

// -->
</SCRIPT>

The code above provides the basic machinery for the animation. To make it work, you will need to specify onMouseOver and onMouseOut actions to call the displayLCDPanel function for each image. For example, to animate an image you had defined with:

	<IMG SRC="imageBlank.jpg" NAME="infoPanel">

you might use something like:

	<A HREF="index.html"
	   onMouseOver="return(displayLCDPanel('infoPanel','imageHome'))"
	   onMouseOut="return(displayLCDPanel('infoPanel','imageBlank'))"><IMG
	   SRC="inline/buttonHome.jpg"></A>

You should also edit the variable definitions at the end of the script so that they point to the images you have in use. For each image you want to use, define one variable with the following form:

	var image_name = preLoadImage(file_name);

replacing image_name and file_name by the name of the variable and the URL of the image file respectively.

If in doubt, use your browser's View Source command to inspect the source code of the demonstration page.