Multiple rollovers on the same page (roll over each of these images):

1 1 1 1


To make the above rollovers each link to a page, simply replace the # in the <a href="#" for each with the filename of a web page, like so: <a href="apagename.html"

Explanation:

Functions that make the rollovers work:

preloadImages function

The code added in the body tag onload="preloadImages();" calls the preloadImages function and asks it to preload the rollover images you will need even before any rollovers are triggered by the user.

The following lines of code in the preloadImages function allow the 4 rollover images to be loaded:

		img1 = newImage("images/1.gif");
		img2 = newImage("images/2.gif");
		img3 = newImage("images/3.gif");
		img4 = newImage("images/4.gif");

img1 (for instance) is just a variable placeholder to get JavaScript to load a new image based on the name or path/name of the image inside the quotation marks.

If I needed to preload different images instead --named create.jpg, revise.jpg, feedback.jpg, reviseagain.jpg, and etc.jpg (and if all were saved in an images folder)-- I would replace the above lines with the following:

		img1 = newImage("images/create.jpg");
		img2 = newImage("images/revise.jpg");
		img3 = newImage("images/feedback.jpg");
		img4 = newImage("images/reviseagain.jpg");
		img5 = newImage("images/etc.jpg");

If I needed to preload yet another image -- named theprocess.jpg and also located in the same images folder-- I would add this line at the end of the above:

		img6 = newImage("images/theprocess.jpg");

And, if I needed to preload yet another image -- named webdesign.jpg but located in the same folder as the web page -- I would add this line at the end of the above:

		img7 = newImage("webdesign.jpg");

You leave the rest of the preloadImages function alone.

simplechangeImage

This function makes the rollover work for the images.

This is what the simplechangeImage function looks like:

function simplechangeImage(image, newimage) {
 	var Image2Change = document.getElementById(image);
 	var newSrc = newimage;
	Image2Change.src = newSrc;
}

Notice in the first line how there are two words in the brackets, like this: (image, newimage) after the function name. This means that the function takes in 2 pieces of information sent to it from somewhere else on the page, and it uses this information to make the rollover work.

image, newimage are essentially two variable-placeholders that accept and hold information sent to the function. Then, because information is in the two variables image and newimage, the variables can both also be used elsewhere in the function.

Here you see image being used in the first line inside the function:

The line var Image2Change = document.getElementById(image); sets the variable Image2Change to remember which element (in this case, which image) on the page will be changed by the function.

Here you see newimage being used in the line inside the function:

The line var newSrc = newimage; sets the variable newSrc to remember which image the page element (the image) in Image2Change will get changed to.

Finally, here you see the rollover actually happen:

The line Image2Change.src = newSrc; changes the source of the image remembered by variable Image2Change to be the new image stored in newSrc.

To better understand how all this JavaScript works, we also have to look at the JavaScript code in the links around the rollover images.

JavaScript in the rollover link code:

Here is the code for the first image rollover:

<a href="#" onmouseover="simplechangeImage('simple', 'images/2.gif'); return true;"
   onmouseout="simplechangeImage('simple', 'images/1.gif'); return true;">
<img id="simple" src="images/1.gif" width="100" height="100" alt="1"></a>

(Normally you wouldn't have the image start on a new line from the end of the opening link tag, but I've done it here for the sake of visual clarity in this example.)

Notice:

So, the onmouseover line is: onmouseover="simplechangeImage('simple', 'images/2.gif'); return true;"
And, the onmouseout line is: onmouseout="simplechangeImage('simple', 'images/1.gif'); return true;"

The image tag itself loads the following image: images/1.gif

Mouseover takes place when the user rolls their mouse over the image. So the image should be changed to the rollover image.
So the onmouseover image needs to be different than the original image loaded -- the onmouseover JS calls the function simplechangeImage and sends it the path and name of the onmouseover image, which is images/2.gif

Mouseout takes place when the user rolls their mouse off of the image. So the image should be changed back to the original image.
So the onmouseout image needs to be the same as the original image loaded -- the onmouseout JS calls the function simplechangeImage and sends it the path and name of the onmouseout image, which is images/1.gif

How simplechangeImage knows which image to change:

The function simplechangeImage changes the correct rollover image to the image filename sent to it by the JavaScript mouse events.

How does simplechangeImage know to change the desired rollover image and not some other image?

Remember, in the above example, the image has an id, and it is set to "simple", like so:
<img id="simple" src="images/1.gif" width="100" height="100" alt="1">

The javascript in the link on the image tag where the rollover takes place sends this id name to function simplechangeImage like so:

onmouseover="simplechangeImage('simple', 'images/2.gif'); return true;"

And the function simplechangeImage takes in the id 'simple' using the variable image like this:

function simplechangeImage(image, newimage) {
 	var Image2Change = document.getElementById(image);
 	var newSrc = newimage;
	Image2Change.src = newSrc;
}

While, at the same time, the function simplechangeImage takes in the image 'images/2.gif' to be used for the rollover using the variable newimage.


Summary

Finally, to come full circle, the preloadImages function is used to load whichever images are desired as rollover images as indicated in the mouseover event JavaScript for the above images.

So, if you were to adapt this example, make sure:

  1. each rollover image has a unique id in the image tag
  2. each rollover image sends the correct image id and rollover image file name
  3. the preloadImages function is set to preload each rollover image needed





The four images used for these rollovers:
1 2 3 4