Welcome to WebmasterWorld Guest from 54.162.168.187

Forum Moderators: open

Message Too Old, No Replies

Change background color using JavaScript

in a table

     
10:10 pm on Jul 9, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 18, 2003
posts:1925
votes: 0


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.

11:03 pm on July 9, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 4, 2002
posts:508
votes: 0


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.

11:16 pm on July 9, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 18, 2003
posts:1925
votes: 0


garann, thanx! that is exactly what I needed! :)
11:44 pm on July 9, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 4, 2002
posts:508
votes: 0


Sure thing. :)
6:17 pm on July 31, 2003 (gmt 0)

Full Member

10+ Year Member

joined:Dec 10, 2001
posts:254
votes: 0


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>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members