Help needed with mouseover photo gallery

[guitareth2]

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 the upper large image. You can view the page here:

http://www.skene-businesscentres.co.uk/test/gallerytest.html

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.

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

IN THE HEADER:

<script type="text/javascript">
var imgs = new
Array("Images/gallery1.jpg","Images/gallery4.jpg","Images/gallery5.jpg","Ima
ges/gallery6.jpg");
function loadMainImg(num) {
document.getElementById("mainImg").src = imgs[num];
}
var imgs = new
Array("Images/gallery2.jpg","Images/gallery7.jpg","Images/gallery8.jpg","Ima
ges/gallery9.jpg","Images/gallery1.jpg","Images/gallery4.jpg","Images/galler
y5.jpg","Images/gallery6.jpg");
function loadMainImg2(num) {
document.getElementById("mainImg2").src = imgs[num];
}
</script>

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

IN THE PAGE BODY:

<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><img src="Images/gallery10sm.jpg" width="90" height="90" /></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>
---------

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

 

[BabyJeffy]

Just guessing here, you need to use a seperate array for the second gallery... or move the scope of the array from global (where it is available to any function) to local (where it is available to only the enclosing function. I have moved the arrays into their respective functions... they ought to work as expected now.

<script type="text/javascript">
function loadMainImg(num) {
var imgs = ["Images/gallery1.jpg", "Images/gallery4.jpg", "Images/gallery5.jpg", "Images/gallery6.jpg"];
document.getElementById("mainImg").src = imgs[num];
}
function loadMainImg2(num) {
var imgs = ["Images/gallery2.jpg", "Images/gallery7.jpg", "Images/gallery8.jpg", "Images/gallery9.jpg", 
"Images/gallery1.jpg", "Images/gallery4.jpg", "Images/gallery5.jpg", "Images/gallery6.jpg"];
document.getElementById("mainImg2").src = imgs[num];
}
</script>

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[guitareth2]

Thamks Jeff, you are an absolute star! That works perfectly. So it appears the only difference is the removal of the term "new Array" in both functions, and that does the trick.

Thanks again.

 

[BabyJeffy]

Not really... the real difference is moving the whole variable declaration into the function (rather than outside the function). This changes the scope of the variable (for the more formal description).

I should have left your array declaration in - sorry, I switched it to use a shorthand method (partly because I'm lazy - and also to show another way of doing the same thing). There is no reason why your old way of declaring the array wouldn't work equally as well (and in some ways would be considered more correct).

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[guitareth2]

Ah, yes I see the differences better now. I actually just copied and pasted the amended script you gave and it worked right away, so I was well pleased anyway :¬)