Help needed with mouseover photo gallery

I am trying to set up a photo gallery on a page on a new site. I need mousing over a thumbnail to show a larger version of that image in a separate image box on the same page. I have found a script that does this and works, but I need to have 3 separate instances of this occurring on the same page and they all need to operate independently. I have currently set up 2 instances, but whenever I test the page, hovering over either set of thumbnails uses the same set of large photos in either upper large image. You can view the page [URL=http://www.skene-businesscentres.co.uk/test/gallerytest.html]here[/URL]

[B]The 4 thumbnails below each larger image are the ones which should appear as the large image in each case when you mouseover them, but it keeps drawing the same set of images (from the 2nd group) for both. Have tried changing certain IDs to be different but still can’t get them to work
independently.[/B]

You can of course view the whole source code, but for reference the main parts of the script which are relevant are:

[B]IN THE HEADER:[/B]

[code=php]<script type=”text/javascript”>
var imgs = new Array(“Images/gallery1.jpg”,”Images/gallery4.jpg”,”Images/gall
ery5.jpg”,”Images/gallery6.jpg”);
function loadMainImg(num) {
document.getElementById(“mainImg”).src = imgs[num];
}
var imgs = new Array(“Images/gallery2.jpg”,”Images/gallery7.jpg”,”Images/gall
ery8.jpg”,”Images/gallery9.jpg”,”Images/gallery1.jpg”,”Images/gallery4.jpg”,”I
mages/gallery5.jpg”,”Images/gallery6.jpg”);
function loadMainImg2(num) {
document.getElementById(“mainImg2”).src = imgs[num];
}
</script>[/code]

You’ll see that I have copied this script twice and just changed loadMainImg2 and MainImg, to loadMainImg2 and MainImg2 for the second instance to try to differentiate. Is this correct?

[B]IN THE PAGE BODY:[/B]

[code=php]

<img src=”Images/gallery1.jpg” alt=”Queens Gardens” name=”mainImg” width=”180″ height=”180″ id=”mainImg” /></p> </td>
<td>&nbsp;</td>
<td colspan=”3″ valign=”top”><br />
<img src=”Images/gallery2.jpg” alt=”Queens Gardens” name=”mainImg2″ width=”180″ height=”180″ id=”mainImg2″ /></td>
<td colspan=”2″ valign=”top”><br /></td>
</tr>

<tr>
<td height=”92″>&nbsp;</td>
<td valign=”top”><img src=”Images/gallery1sm.jpg” alt=”Gallery1 Queens Gardens” name=”thumb1″ width=”90″ height=”90″ id=”thumb1″ onmouseover=”loadMainImg(0)” /></td>
<td valign=”top”><div align=”center”><img src=”Images/gallery4sm.jpg” alt=”Gallery4 Queens Gardens” name=”thumb4″ width=”90″ height=”90″ id=”thumb4″
onmouseover=”loadMainImg(1)” /></div></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td valign=”top”><img src=”Images/gallery2sm.jpg” alt=”Gallery1 Queens Gardens” name=”thumb2″ width=”90″ height=”90″ id=”thumb2″ onmouseover=”loadMainImg2(0)” /></td>
<td valign=”top”><img src=”Images/gallery7sm.jpg” alt=”Gallery4 Queens Gardens” name=”thumb7″ width=”90″ height=”90″ id=”thumb7″ onmouseover=”loadMainImg2(1)” /></td>
<td>&nbsp;</td>
<td valign=”top”><!–DWLayoutEmptyCell–>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height=”92″>&nbsp;</td>
<td valign=”top”><img src=”Images/gallery5sm.jpg” alt=”Gallery5 Queens Gardens” name=”thumb5″ width=”90″ height=”90″ id=”thumb5″ onmouseover=”loadMainImg(2)” /></td>
<td valign=”top”><img src=”Images/gallery6sm.jpg” alt=”Gallery6 Queens Gardens” name=”thumb6″ width=”90″ height=”90″ id=”thumb6″ onmouseover=”loadMainImg(3)” /></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td valign=”top”><img src=”Images/gallery8sm.jpg” alt=”Gallery5 Queens Gardens” name=”thumb8″ width=”90″ height=”90″ id=”thumb8″ onmouseover=”loadMainImg2(2)” /></td>

<td valign=”top”><img src=”Images/gallery9sm.jpg” alt=”Gallery5 Queens Gardens” name=”thumb9″ width=”90″ height=”90″ id=”thumb9″ onmouseover=”loadMainImg2(3)” /></td>[/code]

I am going crazy trying to work this out and would be extremely grateful for any suggestions or advice to help me get both sets of mouseovers working independently.

Thanks

Also in #JavaScript _↴