Tricks: How to...
Image effects:
› Preload images
› Preload images 2
› Swap images
› Swap images 2
› View larger image
› Image transparency
› Image slideshow
Special effects:
› Border
› Border 2
› Watermark
› Scroller
› Scroller 2
› Link hover color
› Custom cursor
› Snowing
› Auto window resizer
› Link tips
› Popup
Buttons & menus:
› Back button
› Java buttons
› Flat buttons
› Slide menu
› Drop down menu
› Alphabet menu
Mouse effects:
› Elastic mouse
› Mouse snake
› Mouse stars
› Mouse orbit
› Mouse eyes
Text generators:
› Infobox
› Quote generator
› Fading messages
› Text fader
› Text glow
› Credits

home > real world > web resource > web source codes >

Adobe ImageReady's code for changing the image on mouse over.

STEP 1/2: Copy this code into the <HEAD> of your HTML document:

<HEAD>
<!-- ImageReady Preload Script (bar02x.gif) -->
<SCRIPT LANGUAGE="JavaScript">
<!--

function newImage(arg) {
   if (document.images) {
      rslt = new Image();
      rslt.src = arg;
      return rslt;
   }
}

function changeImages() {
   if (document.images && (preloadFlag == true)) {
      for (var i=0; i<changeImages.arguments.length; i+=2) {
         document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
      }
   }
}

var preloadFlag = false;
function preloadImages() {
   if (document.images) {
      bar021_over = newImage("bar0201.gif");
      bar022_over = newImage("bar0202.gif");
      preloadFlag = true;
   }
}

// -->
</SCRIPT>
<!-- End Preload Script -->
</HEAD>

STEP 2/2: Put this code into the <BODY> of your HTML document:

<BODY onload="preloadImages();">

<!-- ImageReady Slices (bar02x.gif) -->
<A HREF="#" ONMOUSEOVER="changeImages('bar021', 'bar0201.gif'); return true;" ONMOUSEOUT="changeImages('bar021', 'bar021.gif'); return true;">
<IMG NAME="bar021" SRC="bar021.gif" WIDTH=100 HEIGHT=23 BORDER=0></A>
<A HREF="#" ONMOUSEOVER="changeImages('bar022', 'bar0202.gif'); return true;" ONMOUSEOUT="changeImages('bar022', 'bar022.gif'); return true;">
<IMG NAME="bar022" SRC="bar022.gif" WIDTH=100 HEIGHT=23 BORDER=0></A>
<!-- End ImageReady Slices -->