Helping ordinary people create extraordinary websites!

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)

<style type="text/css">

td.off {
background: #CCCCCC;
}

td.on {
background: #999999;
}

</style>

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:

<td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'">MENU 1</td>

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
 3 Votes

You might also want to check these out:


Leave a Comment on "Changing Table Background on MouseOver"
You must be logged in to post a comment.

Link to This Tutorial Page!
GET OUR NEWSLETTERS