homepage Welcome to WebmasterWorld Guest from 54.167.238.60
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Change background color using JavaScript
in a table
moltar




msg:1487564
 10:10 pm on Jul 9, 2003 (gmt 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.

 

garann




msg:1487565
 11:03 pm on Jul 9, 2003 (gmt 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.

moltar




msg:1487566
 11:16 pm on Jul 9, 2003 (gmt 0)

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

garann




msg:1487567
 11:44 pm on Jul 9, 2003 (gmt 0)

Sure thing. :)

bruhaha




msg:1487568
 6:17 pm on Jul 31, 2003 (gmt 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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved