Skip to page content or Skip to Accesskey List.

Work

Main Page Content

All In One Simple Rollover Javascript

Rated 3.89 (Ratings: 0)

Want more?

  • More articles in Code
 
Picture of AnthonyB

Anthony Baratta

Member info

User since: 10 Jul 1999

Articles written: 12

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. ;-)

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

All-In-One Simple Rollover JavaScript....

Put the following in between the header tags...

<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>

To implement....Here's an example URL and Image Tag:

<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

Mutated into a life-size Dilbert doll, Anthony spends the days wedged into his replica of Cardinal Fang's Comfy Chair coding solutions to the most thorny of internet software problems.

The access keys for this page are: ALT (Control on a Mac) plus:

evolt.org Evolt.org is an all-volunteer resource for web developers made up of a discussion list, a browser archive, and member-submitted articles. This article is the property of its author, please do not redistribute or use elsewhere without checking with the author.