Table Magic
Here is a way to make entire table cells change on mouseover and mouseout.
First, let's create some global definitions for our tables, so here is a style sheet that defines the text color and background color for each cell.
<style>
td
{
font-family: verdana,arial,sans-serif;
font-size:12pt;
font-weight:bold;
background-color: C9C9C9;
}
</style>
Now, within the table itself, we can define the mouse activity like this:
<TABLE bgcolor="#cc0000" cellpadding="1" cellspacing="1" border="0">
<TR>
<TD width="100" onmouseover="this.style.backgroundColor='#FFFF00'; "
onmouseout="this.style.backgroundColor='#C9C9C9'">
<a href="http://www.bravenet.com]><FONT
COLOR="#000000">Bravenet.com</FONT></a>
</TD>
</TR>
<TR>
<TD width="100" onmouseover="this.style.backgroundColor='#FFFF00'; "
onmouseout="this.style.backgroundColor='#C9C9C9'">
<a href="http://www.freeguestbooks.com]><FONT
COLOR="#000000">FreeGuestbooks.com</FONT></a>
</TD>
</TR>
</TABLE>
Note that we have coded the onmouseout value to the original background color (C9C9C9) that we scripted in the stylesheet. This of course could be different, but what this does is set a bgcolor value, change it on mouse hover, then return to our original color. Note also we set a background color for the table (CC0000), which, because we are defining the cell color, acts as a dark red border around our cell. As always, play around with these parameters to get the effect which best suits your site. You can also combine this with the Rollover styles shown in the first section of this newsletter for some really wacky and fun color changes!
Found at: http://www.bravenet.com