Your Rollover Script

Apr 13, 2009 at 2:54 PM
Post a comment

I copied this code from a website that did a great job of explaining it. http://www.macloo.com/examples/javascripts/rollover_example.htm

-Mr. H

_________________________________________________________________________________________________

Roll Your Own Rollover Scripts

Let's assume we have two images:
start.jpg
startglow.jpg

Step 1 (below): List the images on the page and give them simple variable names, such as img1 and img2.

img1 = new Image(186,95);
img1.src = "images/start.jpg";
img2 = new Image(186,95);
img2.src = "images/startglow.jpg";

Step 2: Include a function that will change the image when the function is invoked.

function changeimage(imgx,placex) {
  if (document.images) {
    document.images[placex].src = eval(imgx + ".src");
  }
}

Step 3: Modify the A HREF tag (which makes the image act as a link) to include an onMouseOver instruction (using the function from Step 2 above) and an onMouseOut instruction, also using the function.

Using the NAME Attribute

Notice how the "place" of the image on the page is labeled with the NAME attribute in the IMG tag.

The placeholder NAME ("daisy" in the example above) is used in the JavaScript function that changes the image.
The most common error in creating rollovers: You forget to include NAME in the IMG tag.
Why "daisy"? No reason. The NAME can be any name you choose.
Each image on the page should have a unique placeholder NAME.

One of the nicest things about this script is that you can use it to change a lot of separate instances of one graphic (e.g. a bullet or pointer) AND to change an image in a different location on the page (e.g. show a picture when a button is moused over). See examples of these effects.

> Return to JavaScripts index

________________________________________________________________________________

This is where my "plagerism" ends.

-Mr. H