Image replace works in IE - not FireFox

This code displays three images. When two of the images are moused-over, the third changes color. This works fine in IE but not in FireFox. I'm not very experienced in javascript but I did add an alert to the SetImage function and the correct images are being found. It seems the code in the SetImage function is not correct for FireFox. That's as far as I can get though. Would someoe please take a look and let me know what the problem might be or how to troubleshoot it?

<tr> 
 <td align="center" valign="middle" bgcolor="#FFFFFF"> 
 <span id="theimage"><img src="images/<?php echo $product['products_image'];?>"  border=0 hspace=0 vspace=0></span> 
 </td> 
</tr> 
<tr> 
 <td align="center"> 
 <script> 
  var pimage=new Image(); 
  pimage.src="images/<?php echo $product['products_image'];?>"; 
   
  var im1="images/<?php echo $product['image1'];?>"; 
  var im2="images/<?php echo $product['image2'];?>"; 
  var im3="images/<?php echo $product['image3'];?>"; 
  var im4="images/<?php echo $product['image4'];?>"; 
  var im5="images/<?php echo $product['image5'];?>"; 
   
  var im1f=new Image(); 
  var im2f=new Image(); 
  var im3f=new Image(); 
  var im4f=new Image(); 
  var im5f=new Image(); 
   
  im1="images/<?php echo $product['image1_swatch'];?>"; 
  im1f.src="images/<?php echo $product['image1'];?>"; 
  im2="images/<?php echo $product['image2_swatch'];?>"; 
  im2f.src="images/<?php echo $product['image2'];?>"; 
  im3="images/<?php echo $product['image3_swatch'];?>"; 
  im3f.src="images/<?php echo $product['image3'];?>"; 
  im4="images/<?php echo $product['image4_swatch'];?>"; 
  im4f.src="images/<?php echo $product['image4'];?>"; 
  im5="images/<?php echo $product['image5_swatch'];?>"; 
  im5f.src="images/<?php echo $product['image5'];?>"; 
   
  function SetImage(newimage) 
  { 
  alert(newimage.src); 
  var imspan=document.getElementById("theimage"); 
  var html='<img id="mainimage">'; 
  theimage.innerHTML=html; 
  mainimage.src=newimage.src; 
  } 
  var im=new Image(); 
  im.src=""; 
  //SetImage(im); 
  </script> 
  <script> 
  if (im1!="images/") document.write('<img src="'+im1+'" onmouseover="SetImage(im1f);" width="70">'); 
  if (im2!="images/") document.write('<img src="'+im2+'" onmouseover="SetImage(im2f);" width="70">'); 
  if (im3!="images/") document.write('<img src="'+im3+'" onmouseover="SetImage(im3f);" width="70">'); 
  if (im4!="images/") document.write('<img src="'+im4+'" onmouseover="SetImage(im4f);" width="70">'); 
  if (im5!="images/") document.write('<img src="'+im5+'" onmouseover="SetImage(im5f);" width="70">'); 
  </script> 
 </td> 
</tr> 

PHP:

 

It looks that your function SetImage is trying to display the src of that span. Because you have set the id "theimage" to the span instead to the image.
Try that.

 

I appreciate your reply but would you mind elaborating on it since I don't understand what you mean? I tried moving the id from the span to the img

<img id="theimage"...

PHP:

but that didn't work. I also tried changing mainimage.src=newimage.src to mainimage=newimage, but still no go.

 

Try this:

1.- Move the id from the span to the img (as you said on your second post): <img id="theimage"...

2.- Replace your SetImage function with this:

function SetImage(newimage) 
{
  // alert(newimage.src); 
  var mainimage = document.getElementById("theimage"); 
  mainimage.src = newimage.src; 
}  

Code (markup):

 

Thank you so much. That works great and has lowerved my blood pressure tremendously.