asked on

change the color of one cell when mouseover another cell

This should be straight forward, but I'm having some trouble getting the object reference right.

I have a table with two cells. When I move the mouse over one cell, I want to change the font color of the other.

This does not seem to work:

<table>
<tr>
<td id="cell1">some text</td>
<td onmouseover="cell1.style.color='red'>move mouse here</td>
</tr>
</table>

In the above, I get an "'cell1.style' is null or not an object"

Could someone please give me the right syntax for this. Thanks in advance!

dalsym

try

<table>
<tr>
<td name="cell1">some text</td>
<td onmouseover="cell1.style.color='red'>move mouse here</td>
</tr>
</table>

Sometimes I'll run into that and using name instead of id (or vice/versa) sometimes helps.

You'll also probably want to do an onmouseout to restore the cell back to the original color once they leave the cell.

Good luck

quiTech

ASKER

Hmmm... when I try this, I get "cell1 is undefined" error.

ASKER CERTIFIED SOLUTION

UnexplainedWays

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

UnexplainedWays

And this is a bit more extendable:

<html>
<head>
<script language=javascript>

      function DoThat(theID,theStatus)
      {
            element = document.getElementById(theID);
            if(theStatus)
            {
                  //Mouse over
                  element.style.color='red';
            }
            else
            {
                  //Mouse out
                  element.style.color='black';
            }
      }

</script>
</head>
<body>

<table>
<tr>
<td id="cell1"
onmouseover="DoThat('cell1',true)"
onmouseout ="DoThat('cell1',false)"
>some text1</td>

<td id="cell2"
onmouseover="DoThat('cell2',true)"
onmouseout ="DoThat('cell2',false)"
>some text2</td>

<td id="cell3"
onmouseover="DoThat('cell3',true)"
onmouseout ="DoThat('cell3',false)"
>some text3</td>

<td id="cell4"
onmouseover="DoThat('cell4',true)"
onmouseout ="DoThat('cell4',false)"
>some text4</td>

<td id="cell5"
onmouseover="DoThat('cell5',true)"
onmouseout ="DoThat('cell5',false)"
>some text5</td>

</tr>
</table>

</body>
</html>