Hello,

I used a code from w3 schools.com to make an image rollover. It worked "perfectly." However, the code only showed one working rollover. When I try to add additional rollovers to the same page, I can't quite seem to figure out how to adjust the code so it will work.

On the web address I have listed you will see 2 buttons. One is a working rollover. The other does not do anything, even though I have tried to make it work in the code.

Any help would be greatly appreciated!

Thanks!!

-Jenn

Browser: IE8 and mozilla firefox

OS: Windows Vista

To start, you need to spell the functions correctly. Take a careful look at the spelling for each of the "getElement..." function references in your Javascript. Two are spelled correctly, and two are not.

But once you get the spelling right, it probably still doesn't do what you want. The code from W3C is limited and not expandable to multiple images. The way the code it written, all the buttons will change when you hover over any one of them. There is nothing in the Javascript that lets it know the difference. Here is a link to the Fixed Original Code.

You could expand the Javascript and pass the "id" as a parameter. Then with a series of "if" statements, determine which image to change. Or, you could set up array of images and pass an index number as a function parameter. Or, you could create separate functions for each button. But there is an easier way, that doesn't require a complicated Javascript function. Put the Javascript right in the "img" tag.

This link, to Image Swap Test, shows how the buttons should operate and includes the code for the page. In the code, each button contains it's own Javascript to swap the images. You can expand this to as many buttons as you need. Just keep the "id" for each button different. Carefully note the use of single and double quotes. This is a case of quoting with quotes, so you need to use different quotes.

Browser: FIrefox

OS: Solaris, Redhat, Fedora, Suse

Thank you, Philo! As always, I am deeply indebted to you for all the help you have continued to give me. Now I can get back to work on my website!

-Jenn

Browser: IE8 and mozilla firefox

OS: Windows Vista

This "almost completed" website with the working rollovers (thanks to Philo) can now be viewed at www.mfs.jennswebdesign.org.

I am so happy to finally know how to accomplish image rollovers.

-Jenn

Browser: IE8 and Mozilla Firefox

OS: Windows Vista