[javascript]
Multiple Image Rollover Script
This is a script for a 6 Button Rollover which looks and works like this:
First, cut and paste the following script in-between the <head> and </head> tags of your page:
Change the image files [i.e. "your-image-1-off.gif" & "your-image-1-on.gif"] in this script for your own images. You need 2 images for each button - 1 'on' image and 1 'off' image.
REMEMBER! BOTH THE ON AND THE OFF IMAGE MUST BE EXACTLY THE SAME SIZE!
Now use these individual lines of code to display each of your 6 buttons. Place these lines of code where you want your buttons to appear on your page:
Button 1
Button 2
Button 3
Button 4
Button 5
Button 6
At the beginning of each line, replace href="your page.cfm" with the correct URL's that you want your buttons to link to. Then change the image files in the <img> tag for your own image files [your 'off' image files] on each line and remember to change the width and height attributes to the sizes of your own images. You may also want to put your own button descriptions in the 'alt' attribute.
All your images and mouse functions have been numbered for you so you only need to change the file names.
If you have followed the instructions properly, you now have functioning Rollover Buttons on your page. You can add as many buttons as you wish as long as you remember to allocate new numbers to them.
Study the code here and try to find the pattern that will ensure you develop it correctly. For more instructions regarding adding more buttons, visit my Simple Image Rollovers page.