Mouse in image and out
/*
JavaScript Application Cookbook
By Jerry Bradenbaugh
Publisher: O'Reilly
Series: Cookbooks
ISBN: 1-56592-577-7
*/
<HTML>
<HEAD>
<TITLE>Mouse in image and out</TITLE>
<SCRIPT LANGUAGE="JavaScript1.1">
<!--
var imgNames = new Array('img');
//-->
</SCRIPT>
<SCRIPT LANUAGE="JavaScript">
// images.js
// Set image variables
var imgPath = 'images/';
var arrayHandles = new Array('out', 'over');
// Dynamically create image arrays
for (var i = 0; i < arrayHandles.length; i++) {
eval('var ' + arrayHandles[i] + ' = new Array()');
}
// Preload the images
for (var i = 0; i < imgNames.length; i++) {
imagePreLoad(imgNames[i], i);
}
// Define a function to preload the images
function imagePreLoad(imgName, idx) {
for(var j = 0; j < arrayHandles.length; j++) {
eval(arrayHandles[j] + "[" + idx + "] = new Image()");
eval(arrayHandles[j] + "[" + idx + "].src = '" + imgPath + imgName + arrayHandles[j] + ".gif'");
}
}
// Perform the image rollovers
function imageSwap(imagePrefix, imageIndex, arrayIdx) {
document[imagePrefix].src = eval(arrayHandles[arrayIdx] + "[" + imageIndex + "].src");
}
// This function displays the text passed in the browser status bar
function display(stuff) { window.status = stuff; }
</SCRIPT>
</HEAD>
<BODY BGCOLOR=FFFFEE>
<A HREF="javascript: void(0);"
onMouseOver="imageSwap('img', 0, 1); display(''); return true;"
onMouseOut="imageSwap('img', 0, 0); display('');">
<IMG SRC="http://www.java2s.com/style/logo.png"
NAME=img
WIDTH=90
HEIGHT=50
BORDER=0></A>
</BODY>
</HTML>
Related examples in the same category
