[SOLVED] onmouseover bgcolor change.

[fantasticham]

Having issues with these some script I've written, possibly due to a nested table. I'm trying to get it so that when you rollover one of the coloured boxes on this page, the background colour of the cell above changes.

 

Here's the script:

<script language="javascript">
function changebackground (int color)
{
if (color==1) 
{
	tshirt.bgcolor=#1129DB;
}
if (color==2) 
{
	tshirt.bgcolor=#312D2E;
}
if (color==3) 
{
	tshirt.bgcolor=#FFFFFF;
}
if (color==4) 
{
	tshirt.bgcolor=#15AA35;
}
if (color==5) 
{
	tshirt.bgcolor=#DB1111;
}
}();
</script>

 

Each of the buttons have onmouseover="changebackground(x);" depending on the colour I want changed and the cell in question has name="tshirt". Still no luck though.

[KevinM1]

Do you grab a hold of the tshirt element before attempting to change its background color?  JavaScript can't auto-detect normal, non-form elements.

[fantasticham]

Do you grab a hold of the tshirt element before attempting to change its background color?  JavaScript can't auto-detect normal, non-form elements.

No, I don't think so. How would I go about doing that?

[fantasticham]

I've improved on syntax a little bit.

 

<script language="javascript">
function changebackground (int color)
#
switch(color)
#
{
#
        case 1:
#
           tshirt.bgcolor="#1129DB";
#
           break;
#
        case 2:
#
           tshirt.bgcolor="#312D2E";
#
           break;
#
        case 3:
#
           tshirt.bgcolor="#FFFFFF";
#
           break;
#
        case 4:
#
           tshirt.bgcolor="#15AA35";
#
           break;
#
        case 5:
#
           tshirt.bgcolor="#DB1111";
#
           break;
#
        default:
#
           tshirt.bgcolor="#DB1111";
#
           break;

</script>

 

But still nothing. http://alexisarts.net/pushatostart/index.php?p=tshirts/pixellednes

[KevinM1]

You need to give the table cell you want to change the background of an id, so something like:

 

<td id="tshirt">stuff</td>

 

Next, move your changebackground function code all the way to the end of your HTML, after the closing </body> tag, and before the closing </html> tag.  In that space, scrap what you have and write the following:

 

<script type="text/javascript">
   function changebackground(color) {
      var tshirt = document.getElementById('tshirt')

      switch(color) {
         case 1:
            tshirt.style.backgroundColor = "#1129DB";
            break;

         case 2:
            tshirt.style.backgroundColor = "#312D2E";
            break;

         case 3:
            tshirt.style.backgroundColor = "#FFFFFF";
            break;

         case 4:
            tshirt.style.backgroundColor = "15AA35";
            break;

         case 5:
         default:
            tshirt.style.backgroundColor = "DB1111";
      }
   }
</script>

 

This should work, but as I have written in my signature, it's not tested.

[fantasticham]

Thats it. Fantastic, thanks.