Home » Tutorials » CSS
| Demo: [click
here] to view the sample page |
| 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. |
 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> |
 |
Related CSS Tutorials |
| |
Hiding DIV layers after 5 seconds New
Learn how to hide all the div layers automatically after a specified time. |
| |
Creating and linking external CSS files
Learn how to create and attach external CSS file to a page. |
| |
Having different link colors on one page
Learn how to have more than one link color for the page. |
| |
Fixed Image Background for the page
Learn how to make centered background that stays even when you scroll the page. |
|
 |
|
