Hi,

Please can anyone help me?

I am trying to create a picture gallery which is to appear on the same page as the thumbnail links. The thumbnails are to have a rollover effect and are to load the main picture which in turn has a fade in effect. The web site covers my hobby which is 3d modelling.

This works fine with no problems offline, but as soon as I upload it I am having difficulties with the gallery. I am using windows XP and internet explorer 6;

1. Each thumbnail link now produces a double click sound when picked with the mouse?

2. The first time you pick a thumbnail the gallery picture will briefly display your choice, but then it resets back to the source / original page picture. After the first pick it works as it should but still with the double click sound?

3. The fade in effect doesn’t seem to work as well online as it does offline. I have tried to preload the images but it doesn’t seem to make any difference?

4. I have tried to get this to work on vista based laptop with internet explorer 7, but the gallery wont work?

My basic web building skills are ok but I do not understand scripting and so the scripts came from tutorial sites. I would appreciate if anybody would be able to help me as I have tried for hours and have still not fixed it.

I have included part of the code and a link to the web page below

Thank you.

http://www.geocities.com/balchin3d/bunker-h134.html#

Code:
<head>

<script  type="text/javascript">
function LoadGallery(pictureName,imageFile)
{
  var picture = document.getElementById(pictureName);
  if (picture.filters)
  {
    picture.style.filter="blendTrans(duration=1)";
    picture.filters.blendTrans.Apply();
  }
  picture.src = imageFile;
  if (picture.filters)
  {
    picture.filters.blendTrans.Play();
  }
}
</script>


<script language="JavaScript" type="text/javascript">

if (document.images)   
{
     thumb1on = new Image(125,125);
     thumb1on.src="http://www.geocities.com/balchin3d/pictures/ammo1a.jpg";
     thumb1off = new Image(125,125);
     thumb1off.src="http://www.geocities.com/balchin3d/pictures/ammo1.jpg";

     thumb2on = new Image(125,125);
     thumb2on.src="http://www.geocities.com/balchin3d/pictures/ammo2a.jpg";
     thumb2off = new Image(125,125);
     thumb2off.src="http://www.geocities.com/balchin3d/pictures/ammo2.jpg";

     thumb3on = new Image(125,125);
     thumb3on.src="http://www.geocities.com/balchin3d/pictures/ammo3a.jpg"; 
     thumb3off = new Image(125,125);
     thumb3off.src="http://www.geocities.com/balchin3d/pictures/ammo3.jpg";
}

function mouseOn(imageName)   {
     if (document.images)   {
     document[imageName].src = eval(imageName + "on.src");
     }
}

function mouseOff(imageName)   {
     if (document.images)   {
     document[imageName].src = eval(imageName + "off.src");
     }
}

</script>

</head>
<body bgcolor="#404040">


<!------START OF GALLERY-------->

<img src="http://www.geocities.com/balchin3d/h134-1.jpg" width="600" height="450" align="center" valign="center" id="gallery">

<!------END OF GALLERY-------->



<!------START OF THUMBS-------->

<DIV STYLE="padding: 20px 25px 0px 0px">

<A HREF="#" onMouseOver="mouseOn('thumb1')" onMouseOut="mouseOff('thumb1')" onclick="LoadGallery('gallery','h134-1.jpg')">
<IMG SRC="http://www.geocities.com/balchin3d/pictures/ammo1.jpg" name="thumb1" width="125" height="125" class="frame">
</a>
</DIV>
</TD>

<TD width="150" height="165" rowspan="2" cellpadding="0" cellspacing="0" align="center" valign="center">
<DIV STYLE="padding: 20px 25px 0px 0px">

<A HREF="#" onMouseOver="mouseOn('thumb2')" onMouseOut="mouseOff('thumb2')" onclick="LoadGallery('gallery','h134-2.jpg')">
<IMG SRC="http://www.geocities.com/balchin3d/pictures/ammo2.jpg" name="thumb2" width="125" height="125" class="frame">
</A>
</DIV>
</TD>

<TD width="147" height="165" rowspan="2" cellpadding="0" cellspacing="0" align="center" valign="center">
<DIV STYLE="padding: 20px 22px 0px 0px">

<A href="#" onMouseOver="mouseOn('thumb3')" onMouseOut="mouseOff('thumb3')" onclick="LoadGallery('gallery','h134-3.jpg')">
<IMG SRC="http://www.geocities.com/balchin3d/pictures/ammo3.jpg" name="thumb3" width="125" height="125" class="frame">
</a>
</DIV>
</TD>
<!------END OF THUMBS-------->
Thank you