Webuser Forums: Rolling your mouse over an image to enlarge it?

Hi Zippy_Brown,

Thanks for the link, but I'm now stuck. I am putting 20 images onto a page and there will be 9 pages. So to make it easier for myself, I'm planning to have 1 page 20 images in 9 seperate folders, so I know where things are.

I think I have followed the first part of that "fact sheet" correct by creating an img.js file. Here is the scrip:-

if (document.images) {
image0 = new Image;
image1 = new Image;
image2 = new Image;
image3 = new Image;
image4 = new Image;
image5 = new Image;
image6 = new Image;
image7 = new Image;
image9 = new Image;
image10 = new Image;
image11 = new Image;
image12 = new Image;
image13 = new Image;
image14 = new Image;
image15 = new Image;
image16 = new Image;
image17 = new Image;
image18 = new Image;
image19 = new Image;
image0.src = 'graphics\/img.jpeg';
image1.src = 'graphics\/img1.jpeg';
image2.src = 'graphics\/img2.jpeg';
image3.src = 'graphics\/img3.jpeg';
image4.src = 'graphics\/img4.jpeg';
image5.src = 'graphics\/img5.jpeg';
image6.src = 'graphics\/img6.jpeg';
image7.src = 'graphics\/img7.jpeg';
image8.src = 'graphics\/img8.jpeg';
image9.src = 'graphics\/img9.jpeg';
image10.src = 'graphics\/img10.jpeg';
image11.src = 'graphics\/img11.jpeg';
image12.src = 'graphics\/img12.jpeg';
image13.src = 'graphics\/img13.jpeg';
image14.src = 'graphics\/img14.jpeg';
image15.src = 'graphics\/img15.jpeg';
image16.src = 'graphics\/img16.jpeg';
image17.src = 'graphics\/img17.jpeg';
image18.src = 'graphics\/img18.jpeg';
image19.src = 'graphics\/img19.jpeg';
} else {
image0 = '';
image1 = '';
image2 = '';
image3 = '';
image4 = '';
image5 = '';
image6 = '';
image7 = '';
image9 = '';
image10 = '';
image11 = '';
image12 = '';
image13 = '';
image14 = '';
image15 = '';
image16 = '';
image17 = '';
image18 = '';
image19 = '';
document.rollimg = '';
}

Then I have put the next script into my page in the "head" section:-

<script type="text/javascript" src="img.js">
</script>

In the next part of the "fact sheet" it says:-

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:


<img src="graphics/pic1.gif" width="32" height="32" border="0" alt="1" /> 
<img src="graphics/pic2.gif" width="32" height="32" border="0" alt="2" /> 
<img src="graphics/pic3.gif" width="32" height="32" border="0" alt="3" />

<img src="graphics/pic1a.gif" width="150" height="150" border="0" alt="Larger version of one of the smaller images above" name="rollimg" />

Now I'm stuck. I've put all my 20 images onto the page where I want them and put the first large image onto the page as well.

I don't know what to edit from the scrippt or how. Also do I need to list all 20 images in the script for each image that is on the page?

I would be grateful if you could help me out please.

Cheers