Home
HTML and CSS
Tutorials
Changing Table Background on MouseOver
Level: Experienced Software:
This tutorial will teach you how to make a menu like tables that will change background color when you mouseOver. If you have noticed I have used it on my index page.
1. 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
2. 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 gray #CCCCCC.
td.on will be our changing color which is darger gray #999999.
3. 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.
4. 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> |
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com