Change background color using JavaScript

in a table

[moltar]

Hi,

I was wondering how can I change background color of a table cell when mouse is over a link which located in the same cell.

Thank you.

[garann]

Something like this?

<table style="background-color:#fff;">
<tr>
<td id="cell1"><a href="#" onmouseover="hilite('cell1')">Highlight cell</a></td>
<td id="cell2"><a href="#" onmouseover="hilite('cell2')">Highlight cell</a></td>
<td id="cell3"><a href="#" onmouseover="hilite('cell3')">Highlight cell</a></td>
</tr>
</table>

<script>
function hilite(id) {
 // clear colors
 document.getElementById("cell1").style.backgroundColor = "#fff";
 document.getElementById("cell1").style.backgroundColor = "#fff";
 document.getElementById("cell1").style.backgroundColor = "#fff";
 // highlight selected cell in red
 document.getElementById(id).style.backgroundColor = "red";
}
</script>

hth,
g.

[moltar]

garann, thanx! that is exactly what I needed! :)

[garann]

Sure thing. :)

[bruhaha]

Using getElementByID() and writing a function that lists every single cell with a link in it can get very long and tedious. (Note that you also need to write another function to 'turn off' the highlighting. Otherwise, the last cell you place your mouse over will not change back.)

For a simple alternative, add a pair of styles to your style sheet:

.linkout {background-color: #fff;}
.linkover {background-color:#f00;}

Then change the style on mouseover and mouseout:

<table><tr>
<td onmouseover="this.className='linkover'" onmouseout="this.className='linkout'"><a href="#">cell 1</a><td>
<td onmouseover="this.className='linkover'" onmouseout="this.className='linkout'"><a href="#">cell 2</a><td>
<td onmouseover="this.className='linkover'" onmouseout="this.className='linkout'"><a href="#">cell 3</a></td>
</tr></table>