CSS Tutorials
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!
Loading ...
lose weight program says:
I will immediately grab your rss as I can not find your email subscription hyperlink or e-newsletter service. Do you’ve any? Please let me know in order that I may subscribe. Thanks.