• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 245
  • Last Modified:

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!
0
quiTech
Asked:
quiTech
  • 2
1 Solution
 
dalsymCommented:
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
0
 
quiTechAuthor Commented:
Hmmm... when I try this, I get "cell1 is undefined" error.
0
 
UnexplainedWaysCommented:
Here's a basic version:


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

      function DoThat()
      {
            element = document.getElementById("cell1");
            element.style.color='red';
      }

</script>
</head>
<body>

<table>
<tr>
<td id="cell1">some text</td>
<td onmouseover="DoThat()">move mouse here</td>
</tr>
</table>


</body>
</html>
0
 
UnexplainedWaysCommented:
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>
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now