All In One Simple Rollover Javascript

With all the talk of roll overs - I'd thought I'd post a nifty script that I use for my rollovers. It works with IE (4,5) and NS (3,4). BTW - I didn't write this, don't shoot the messenger. ;-)

+++++++++++++++++++

<SCRIPT>
<!--
// Handles rollover images for NN3+ and IE4+
var loaded = new Array();
function F_loadRollover(image,imageName) {
   if (image && image.src &&
    (null == image.out || typeof(image.out) == typeof(void(0)))) {
      s = image.src;
      image.out = new Image();
      image.out.src = s;
      image.over = new Image();
      if (imageName.lastIndexOf('/') >= 0 || imageName.lastIndexOf('\') >=0) {
         s = imageName;
      } else {
         i = s.lastIndexOf('/');
         if (i<0) i = s.lastIndexOf('\');
         if (i<0) { s = imageName; }
         else     { s = s.substring(0,i+1) + imageName; }
      }
      image.over.src = s;
      loaded[image.name] = image;
   }
}
function F_roll(imageName,over) {
   if (document.images) {
      if (over) { imageObject = "over"; }
      else      { imageObject = "out"; }
   image = loaded[imageName];
   if (image) {
       ref = eval("image."+imageObject);
       if (ref) image.src = eval("image."+imageObject+".src");
   }
   if (window.event)
      window.event.cancelBubble = true;
   }
}
//-->
</SCRIPT>

<A HREF="/www/path/to/page.html" onMouseOver="F_roll('ImageName',1)"
onMouseOut="F_roll('ImageName',0)">
<IMG NAME="ImageName" SRC="/www/path/to/imageLO.gif"
onLoad="F_loadRollover(this,'/www/path/to/imageHI.gif')" BORDER=0 
ALT="Home"></A>

Don't touch the JavaScript itself, it's written to be self contained. There should be nothing you have to do there. All the work is setting up the URL and IMAGE tags.

1. Change the HREF to equal your target URL or script. Use relative or hard links, script does not care.
2. Change ALL references to ImageName to a name for your "pair" of Images that are used for the rollover. This is the key to the script. Important Note: You must use a unique name for each pair of images. There are three places the name needs to be synchronized.
3. Replace /www/path/to/imageLO.gif with the path and name of the primary image. Use relative or hard links, script does not care.
   (The main image the person sees is the image sourced inside the IMAGE tag. The image swapped out during the roll over is the image sourced in the F_loadRollover function call.)
4. Replace /www/path/to/imageHI.gif with the path and name of the secondary image. Use relative or hard links, script does not care.
5. Replace the ALT value with something descriptive to your URL. Don't piss off those using Lynx, older browsers, surfing without images on or other reasons.
6. Repeat the URL/Image tag combination for each set of rollover images.

### How does this work??? ####

Here's my flimsy two cents, since I am NOT the JavaScript Guru:

When the images are loaded, you'll notice that the second image is loaded via the first JavaScript Function (F_loadRollover). This function creates an Array of Images using the Name of the image during the page load. When the mouse overs are invoked they call the second Java Script Function (F_roll). The second function takes the name of the image and '1' or '0'. With that info, it invokes the proper image via the array built previously and makes that one auto-magically appear.

Ta Da. Image rollovers.

Good Luck.....Hope this helps or at least does not hurt.

--
Anthony Baratta