Mouse in image and out : Image Img : HTML : JavaScript DHTML examples (example source code) Organized by topic

JavaScript DHTML
C++
PHP
JavaScript DHTML Home »  HTML   » [  Image Img  ]   
 



Mouse in image and out

Please note that some example is only working under IE or Firefox.

/*
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('va' + 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
1.  Get the file name specified in the href or src property
2.  Image dynsrc
3.  Low resolution Image src
4.  Image Long Description
5.  Image width Example
6.  Does image download completely
7.  Alternative Information Example
8.  Image align Example
9.  Image 'src' Property
10.  'height' Example
11.  'readyState' Example
12.  'galleryImg' Example
13.  Monitors the load process and the display of picturesHas Download File
14.  Image Animation
15.  Image array
16.  Replace image
17.  An animating image
18.  Scrolling Image
19.  Change the height of an image
20.  Change image
21.  Change image width
22.  Count images in a document
23.  Image Event Handling
24.  Methods and Properties of the Image Object
25.  Testing an Image's align Property
26.  A Scripted Image Object and Rotating Images
27.  Scripting image.complete
28.  Changing Between Still and Motion Images
29.  Simple Image Replacement
30.  Image Error Finder
31.  Image element
32.  Image Roller MachineHas Download File
























Home| Contact Us
Copyright 2003 - 04 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.