Rollover Gallery

3. Add to Your Page

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.rollimg.src to the preloaded copy of the larger version of that image. The only other change that you need to make is to add name="rollimg" to the image tag for the larger image so that the rollovers will know which imige it is that is to be replaced.

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: