Help with script, please!

[Charlie Hustles]

I can't seem to get this to work no matter how hard I try.
Here is the page I am working on (go to products):
http://www.nightmareskate.com/
And the frame itself:
http://www.nightmareskate.com/products.html
What I am trying to do is make it so that there is a set of colors under each shirt, and when you mouseover a color, it changes the shirt that color. I was able to get the first one working, but when I try to do it for the others, I can't seem to get it right.
Please help, I'm going crazy trying to figure it out.
Thanks.

[Eric Pascarello]

This is how I personally would do it...

<script>
  var shirtImages=new Array();
  shirtImages[0]=new Array("shirt1pic1.jpg","shirt1pic2.jpg","shirt1pic3.jpg","shirt1pic4.jpg");
  shirtImages[1]=new Array("shirt2pic1.jpg","shirt2pic2.jpg","shirt2pic3.jpg","shirt2pic4.jpg");
  function changeShirt(theShirt,theImage){
    document.getElementById("shirt" + theShirt).src = shirtImages[theShirt][theImage];
    document.getElementById("shirt" + theShirt).alt = shirtImages[theShirt][theImage];
 
  }
</script>
  <img id="shirt0" src="shirt1pic1.jpg" style="width:100px;height:150px;">
  <table style="border:solid #000000 1px;width:60px" cellpadding="0" cellspacing="0">
    <tr>
      <td style="cursor:hand;background:#FFFFFF;width:25%" onmouseover="changeShirt(0,0)"> </td>
      <td style="cursor:hand;background:#AAAAAA;width:25%" onmouseover="changeShirt(0,1)"> </td>
      <td style="cursor:hand;background:#777777;width:25%" onmouseover="changeShirt(0,2)"> </td>
      <td style="cursor:hand;background:#000000;width:25%" onmouseover="changeShirt(0,3)"> </td>
    </tr>
  </table>
  <br>
  <img id="shirt1" src="shirt2pic1.jpg" style="width:100px;height:150px;">
  <table style="border:solid #000000 1px;width:60px" cellpadding="0" cellspacing="0">
    <tr>
      <td style="cursor:hand;background:#FFFFFF;width:25%" onmouseover="changeShirt(1,0)"> </td>
      <td style="cursor:hand;background:#AAAAAA;width:25%" onmouseover="changeShirt(1,1)"> </td>
      <td style="cursor:hand;background:#777777;width:25%" onmouseover="changeShirt(1,2)"> </td>
      <td style="cursor:hand;background:#000000;width:25%" onmouseover="changeShirt(1,3)"> </td>
    </tr>
  </table>

Eric

[Charlie Hustles]

Thanks man that worked perfectly. But for some reason it will work by itself ( http://www.nightmareskate.com/products.html ) but not in the iFrame when you click products on the main menu ( http://www.nightmareskate.com ). Do you have any idea why?

[Eric Pascarello]

There is something getting in the way with your menu on the right I think..
Try this
add a break <br> after the image and the table
Add a div tag around the tag, give it a width of 100% and center it
<div style="text-align:center;width:100%">
see if that makes a difference....Not sure...
Eric

[Charlie Hustles]

I tried changing it to http://www/nightmareskate.com/products.html , sorry I don't know how to post code on this forum yet)and messing around with that a little. Not sure if that's exactly what you meant, but I still can't get it to work when it's in the frame.

[Charlie Hustles]

Nevermind, I got it working. Thanks.