Rollover Gallery with Captions

2. Obtain the Script

The easiest way to set up an image rollover with an associated caption is to first set up the rollover and once that is working you modify the code to add the caption.

Here is the code that I used for the sample page (with the new code shown in bold):

if (document.images) {
image0 = new Image;
image1 = new Image;
image2 = new Image;
image0.src = 'graphics\/pic1a.gif';
image1.src = 'graphics\/pic2a.gif';
image2.src = 'graphics\/pic3a.gif';
} else {
image0 = '';
image1 = '';
image2 = '';
document.rollimg = '';
}
var cap = ['Picture One',
'Second Picture',
'Three'];

function rollover(n) {
document.rollimg.src = window['image'+n].src;
document.getElementById('caption').innerHTML
= cap[n];
}

You will probably have a different number of images to what I have here and they certainly will have different names. That doesn't matter, you just have to make sure that the large images you are using are loaded into image0.src, image1.src etc with the only part of that name that changes being the number.

The cap array contains the corresponding caption text so you will have entries here to correspond to each of the images. The first entry in the array (cap[0]) is the caption that belongs to the image stored in image0.src and so on for the other entries in the array. The rollover function needs to be coded exactly as shown.

Once you have created your code you just save it to an external javascript file. I called mine imgc.js. You then link it into the head of your page using the following code:

Now all that remains (assuming you aready added the image gallery itself) is to add the captions to your page.