[RESOLVED] onMouseOver to change bgcolor in a table?

[joyfuljoyful3]

I tend to stay away from JavaScript b/c I'm no good at it. But I have a navigation bar that's actually a table, and I want the background color of the table cell to change color when the user hovers over the link (like a button changing color, except it's a table). I'm sure there's a simple solution to this, but I can't get the script to work. Can anyone give me a script that will work? Here's the code I have currently:

<TABLE align="center" cellspacing="0" cellpadding="0" width="100%">
<TR bgcolor="#8B008B">
<TD align="center" width="10%"> <a href="/index.html" class="nav" onMouseOver="TD.bgColor='#BA55D3'">Home</a> </TD>

The website is http://www.becomingthecrownjewel.com if anyone wants to see the whole thing.

[VolcomMky]

Here is probably the simplest way.

<style>
.tdNormal{
	background-color:#8B008B;
}
.tdHover{
	background-color:#09F;
	cursor:pointer
}
</style>

<TABLE align="center" cellspacing="0" cellpadding="0" width="100%">
<TR bgcolor="#8B008B">
<TD align="center" width="10%" onmouseover="this.className='tdHover'" onmouseout="this.className='tdNormal'" class="tdNormal"> <a href="/index.html" class="nav" onMouseOver="TD.bgColor='#BA55D3'">Home</a> </TD>

[mataichi]

You have to reference the node (in this case the cell <td>) to change the background color.
I would put an id attribute in your <td> (ie <td id="Home">)
You can this easily reference the node by doing document.getElementById('Home') in your mouseover event.

Also, bgColor is not the proper way to reference the background color of the cell. Try this...

document.getElementById('Home').style.backgroundColor = '#BA55D3'

[joyfuljoyful3]

Thanks! That worked beautifully!