Changing Table Background on MouseOver

By Ades Tynyshev
2005-05-31

Changing table background on MouseOver

First create your menu on your page. Then identify your two colors, one is for mouseOver and another one for initial color. In my case mouseOver color is: #999999 and initial color is: #CCCCCC

Now copy this code to the head of you document. (Between <HEAD></HEAD> tags)

Change the color in blue with your own colors.

td.off will be our initial table color which is lighter grey #CCCCCC.
td.on will be our changing color which is darker grey #999999.

Now we have to apply the CSS to the table that you have created. Insert the following code in every <td> tag inside your table.

class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"

So your code should look like this:

Let's go through the code one by one:
1: <td class="off" - Assigns the off class of our CSS to the table column, which means initially the table column background will have a color of #CCCCCC
2: onmouseover="this.className='on'" - Assigns the on class of our CSS to the table column, when we mouseOver on it
3: onmouseout="this.className='off'"> - Assigns the off class of our CSS to the table column back, when we take away the mouse from it.

Full Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Table Background Change</title>
<style type="text/css">
td.off {
background: #CCCCCC;
}
td.on {
background: #999999;
}
</style>
</head>
<body>
<table width="150" cellpadding="3">
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'"><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif">Menu
1 </font></td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'"><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif">Menu
2 </font></td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'"><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif">Menu
3</font></td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'"><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif">Menu
4 </font></td>
</tr>
</table>
</body>
</html>

Tutorial Pages:
» Changing table background on MouseOver

| Write For Us

Related Tutorials:
» Planning Your Stylesheet - The Definitive Guide
» CSS Shorthand Properties
» Print Stylesheet - The Definitive Guide
» Using CSS Selectors to Highlight Unedited Form Fields
» An Introduction to CSS
» Overlapping tabbed navigation in CSS