[patter]

This code displays three images. When two of the images are mousedover, 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?

PHP Code:

<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>

[jfulton]

Where are you declaring the variables theimage and mainimage? Try declaring them like this...

function SetImage(newimage)
  {
  alert(newimage.src);
  var imspan=document.getElementById("theimage");
  var html='<img id="mainimage">';
  var theimage = imspan.getElementsByTagName("IMAGE")[0];
  theimage.innerHTML=html;
  var mainimage = document.getElementById("mainimage");
  mainimage.src=newimage.src;
  } 

To make sure you're getting the right elements, do some alerts on those two variables to see what they are in Firefox.

Also, this probably won't matter, but you might want to close your img tag.

[patter]

I'm not a javascript programer. I can get by on the very basic but not much beyond that. I was given this project and told there was a problem in it so what I posted is pretty much all I know if it. I've searched the whole project and the variables are not being declared anywhere else.

But if I try your code, it doesn't work at all, even in IE. I did check the images with alerts and they are the correct ones. I don't know what other elements to check. I also don't see an open img statement. Would you please point that out, along with any suggestions if you have them?

[jfulton]

Hmmm...do you have a link we can look at, because without seeing the whole document and all of the scripts, it's hard to know exactly what's going on, since it looks like some of your JS variables might be global. I was just assuming that some of the variables were being declared incorrectly, but maybe not? (For example, the "imspan" variable is declared, but never used???) Do you know what those variables are supposed to be referencing - which images, etc?

Originally Posted by patter

I also don't see an open img statement. Would you please point that out, along with any suggestions if you have them?

I got a little bit too far ahead of myself. It depends on what your doctype is, but if you have an xHTML doctype, you should close the image tag with a forward slash like <img src="" /> instead of <img src="">. But in all honesty, it doesn't really matter - the browser will figure it out anyways.

[patter]

I took the parts of the code that have to do with this and created an html file. It can be reached http://64.22.69.19/~ptosc/rollover/change_image.htmlIf you view that in IE, it will work fine. If you view it in Firefox, it will work once if you rollover the Natural box then it no longer works until the page is reloaded. The complete code is below. The variables are not global. They were just not declared.

HTML Code:

<html>
<head>
<title></title>
</head>
<body>
<table width="266" height="266" border="0" cellpadding="0"
cellspacing="1" bgcolor="#AD88B5">
<tr>
<td align="center" valign="middle">
<table width="264" height="264" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td align="center" valign="middle" bgcolor="#FFFFFF">
 <span id="theimage"><img src="images/testimgs/103-1.gif" border="0" hspace="0" vspace="0"></span></td>
</tr>
</table>
</td>
</tr>
</table>

 

<table width="266" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>*</td>
</tr>

 
<tr>
<td align="center"><script type="text/javascript">
var pimage=new Image();
pimage.src="images/testimgs/103-1.gif";

var im1="images/testimgs/103-1.gif";
var im2="images/testimgs/103-3.gif";

var im1f=new Image();
var im2f=new Image();

im1="images/testimgs/103-2.gif";
im1f.src="images/testimgs/103-1.gif";
im2="images/testimgs/103-4.gif";
im2f.src="images/testimgs/103-3.gif";

function SetImage(newimage)
{
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 type="text/javascript">
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">');
 
</script></td>
</tr>
</table>
</body>
</html>