I've run into a problem with one of the easier javascripts (I'm still learning) and I figured surely there would be a few people here who are fluent enough to help me with it. I'm using a rollover script where an image changes to another when the mouse passes over it. Here is the script:

COPIED INTO HEADS




COPIED INTO BODY

[url=http://java-scripts.net" onmouseover="document.rollover.src=button2.src" onmouseout="document.rollover.src=button1.src] img src="img1.gif" border=0 name="rollover" /a

*note: I did not include the "<" and ]" around the "img src="img1.gif" border=0 name="rollover" /a at the end so that it would show in this post instead of the code trying to post a picture in this message.
I got the script from this link:

http://www.java-scripts.net/javascripts ... ript.phtml

Everything works great when I replace "img1.gif" and "img2.gif" with my images and indicate those pics in the "button1.src =" and "button2.src =" section. My problem is, I have more than one picture (used as links) that I would like to change when the mouse rolls over it. However, with everything I've tried I can't get it to work for more than one image. I know there must be something I'm missing or doing wrong. Can someone help instruct me as to how to get more than just one image to work?

Hi Sean, copied from my site (waynejohnson.net), I have four images doing exactly what you are trying to do. I've paasted the code below for you to use:


(this code is from the head)
-----------------------------------





(from the html body)
-----------------------------



-------------------

Explaination: I set up four invisible image holders in the head and preload them with my "button on" images. Then in the html, the inital images loaded onto the page are obviously "image off" versions. It is important that the images on the page are named.

Then with a simple onmouseover, you load the src of a hidden image into the source of your named image on the page. With the onmouseout, I just load the image src from the images folder because these have already been cached into memory the first time and so are fast anyway. Hope this helps.[/code]

I suspect that it has to do with the 'name' attribute of each img tag. In your case it is named 'rollover'. If you place the second part in the body of the page several times, you must change 'rollover' in each copy to a different name (say, 'rollover2', 'rollover3', etc). Note that this name occurs three times.

Also add the new images to the list in the header, giving them new names (button3, button4, etc), and change the appropriate references to these in the body. If you compare this to Waynes script, his simply quotes the image url directly. That is fine too, though it often leads to the mistake of forgetting to preload one or more of the images in the header.

If you have a lot of images, there are slightly better scripts for preloading all the images in an array instead.

Thanks Wayne! Your script makes things a lot easier to grasp. I plugged it in and everything works perfectly.
Jaap, I haven't messed with the other script since I got it to work with Wayne's, but I might give it a try with your advice just for the sake of understanding how it works. Since I have only 3 changing images on each page, I shouldn't run into the problem you mentioned. I do apprechiate all of your help guys!