mouse over in table bgcolor effect...

[raptori]

I have a table with 1row and 2 columns

_________________
|.>.|..home...........|
-------------------

When the mouse goes over the home column then i want the background color and/or text color to change for Column 1.
How do i do this?

Thx in advance...
raptori.

[wap3]

One way could be to give the cell you want highlighted and 'id' and then create a script which will change the background color of the chosen cell.

Then just call the script with onMouseover="changebkground()"

I'll let you try and figure out the script for now. If you can't post back here and someone will no doubt help you.

:thumbsup:

[raptori]

I don't know Java Script
anyone willing to help?:o

[chrismiceli]

<script type="text/javascript">
function changebackground(loc) {
loc.style.background = "whatever" //don't know css that well, is background a valid statement?
}
</script>
<table>
<tr onMouseOver="changebackground(this)">stuff</tr><td onMouseOver="changebackground(this)">stuff</td>
</table>

[Gordo]

Or skip the JavaScript altogether and use the following. Add it to every <TR> on which you want this effect.

<tr onmouseover="this.style.backgroundColor='#FF0000'" onmouseout="this.style.backgroundColor='#FFFFFF'">

...........or to specific <TD> table cells.

I don't know about all the browsers, but I know it works in IE6 and N6. It does not work in N4 -- it ignores it. No problems.

[wap3]

I think he is looking to change the colour of colum 1 when he hovers over coulum 2

So something like this
name column one id="1"

then use this script:

<script type="text/javascript">
function changebackground(name) {
document.getElementById("name").style.backgroundColor = "#999999"
}
</script>

and call the script with something like this is colum two

onMouseOver="changebackground('1')"


Thi isn't cross browser and I havn't tested it so take it as it comes :D

[raptori]

Thank You very much... i found out how to do it with your help. So thinaks again...:thumbsup:
here is the code:

<table width="183" height="19" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="24" id="test" ><div align="center">&gt;</div></td>
<td width="159" onMouseOver="test.style.backgroundColor='#FF0000'" onMouseOut="test.style.backgroundColor='#FFFFFF'">stuff2</td>
</tr>
</table>
I figured out that if i make an id for the <td> then i can use that id insted of this.style... and i put the id on the first <td> and the mouseover thingys on the other. It worked!!!:D