Mouse in image and out

Mouse in image and out : Mouse Event : Event JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » Event » Mouse Event »

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.navioo.com/style/logo.png"
     NAME=img
     WIDTH=90
     HEIGHT=50
     BORDER=0></A>

</BODY>
</HTML>