1. Computing & Technology
About.com
JavaScript
See More About:

Multiple Rollover Gallery

3. Add to Your Page
clr gif
Join the Discussion

Questions? Comments?

More of this Feature

Introductiont Obtain the Script

All that remains to be done now is to add the images into your web page.

THe first thing to do is to add all of the smaller images to your page exactly as you normally would and also place the first of the larger images where you want it to appear. You then surround each of the smaller images with a span tag that contains an onmouseover call that sets document.rollimg1.src to the preloaded copy of the larger version of that image if it is in the first set of small images and document.rollimg2.src if it is in the second set. The only other change that you need to make is to add name="rollimg1" to the image tag for the first larger image and name="rollimg2" to the image tag for the second larger image so that the rollovers will know which image it is that is to be replaced for that particular rollover.

Here is the code from the sample page so that you can see what these additions look like, the span tags around the first of the smaller images as well as the name attribute on the larger image are shown in bold:

<p align="center"><span onmouseover="document.rollimg1.src=image0.src;">
<img src="graphics/pic1.gif" width="32" height="32" border="0" alt="1" /></span> <span onmouseover="document.rollimg1.src=image1.src;">
<img src="graphics/pic2.gif" width="32" height="32" border="0" alt="2" /></span> <span onmouseover="document.rollimg1.src=image2.src;">
<img src="graphics/pic3.gif" width="32" height="32" border="0" alt="3" /></span>
</p>
<p align="center"><img src="graphics/pic1a.gif" width="150" height="150" border="0" alt="Larger version of one of the smaller images above" name="rollimg1" /></p> <p align="center"><span onmouseover="document.rollimg2.src=image3.src;">
<img src="graphics/pic1.gif" width="32" height="32" border="0" alt="1" /></span> <span onmouseover="document.rollimg2.src=image4.src;">
<img src="graphics/pic2.gif" width="32" height="32" border="0" alt="2" /></span> <span onmouseover="document.rollimg2.src=image5.src;">
<img src="graphics/pic3.gif" width="32" height="32" border="0" alt="3" /></span>
</p>
<p align="center"><img src="graphics/pic1a.gif" width="150" height="150" border="0" alt="Larger version of one of the smaller images above" name="rollimg2" /></p>

As you can see the only difference between the two sets of code is the name of the image that is to be replaced.

Sample Page | Obtain the Script | Add to Your Page

©2012 About.com. All rights reserved.

A part of The New York Times Company.