Script not working in FireFox and Safari

[websiteguy]

I am using a script I found for loading larger images into a div when clicking on a thumbnail link. This works fine in IE7, but does not allow the image to appear in the div on FireFox and Safari.

 

I have tried several variations after doing some research on the W3C standards. It originally used document.all, but I removed that.

 

The code:

<script language="JavaScript">
// Gallery script.
// With image cross fade effect for those browsers that support it.
// Script copyright (C) 2004 www.cryer.co.uk.
// Script is free to use provided this copyright header is included.
function LoadGallery(pictureName,imageFile)
{
  document.getElementById(pictureName).src = imageFile;
}
</script>


</head>

 

The html:

<div id="slideshow">
  <div id="scroll"><a href="#_self" onclick="LoadGallery('holder', 'images/house-back1-lg.jpg')"><img src="images/house-back1-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/house-back3-lg.jpg')"><img src="images/house-back3-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/Beach-lg.jpg')"><img src="images/Beach-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/beach-cple-lg.jpg')"><img src="images/beach-cple-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/LapPool-lg.jpg')"><img src="images/LapPool-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/Sunset-lg.jpg')"><img src="images/Sunset-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/house-front-lg.jpg')"><img src="images/house-front-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/beachpath-lg.jpg')"><img src="images/beachpath-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/sunrise-lg.jpg')"><img src="images/sunrise-th.jpg" /></a></div>
  <div id="bigimage"><img name="holder" src="images/house-back1-lg.jpg" width="452" height="289" alt="Picture of Villa La Fiaca" /></div>
</div>

 

Sorry for all the images to filter through in the div, but I wanted to give you the whole picture.

 

I would appreciate any help on how to make this work in all browsers.

 

[phpQuestioner]

it's because you did not give your image the id of "holder"; instead you gave it a name of "holder".

 

try this:

 

<script language="JavaScript">
// Gallery script.
// With image cross fade effect for those browsers that support it.
// Script copyright (C) 2004 www.cryer.co.uk.
// Script is free to use provided this copyright header is included.
function LoadGallery(pictureName,imageFile)
{
  document.getElementById(pictureName).src = imageFile;
}
</script>



<div id="slideshow">
<div id="scroll"><a href="#_self" onclick="LoadGallery('holder', 'images/house-back1-lg.jpg')"><img src="images/house-back1-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/house-back3-lg.jpg')"><img src="images/house-back3-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/Beach-lg.jpg')"><img src="images/Beach-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/beach-cple-lg.jpg')"><img src="images/beach-cple-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/LapPool-lg.jpg')"><img src="images/LapPool-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/Sunset-lg.jpg')"><img src="images/Sunset-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/house-front-lg.jpg')"><img src="images/house-front-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/beachpath-lg.jpg')"><img src="images/beachpath-th.jpg" /></a><a href="#_self" onclick="LoadGallery('holder', 'images/sunrise-lg.jpg')"><img src="images/sunrise-th.jpg" /></a></div>
<div id="bigimage"><img id="holder" src="images/house-back1-lg.jpg" width="452" height="289" alt="Picture of Villa La Fiaca" /></div>
</div>

[websiteguy]

Thank you very much!!!

 

That did the trick. It's working perfectly now.