Software Tutorials |
|
Website Templates Types |
|
|
Website Templates Categories |
|
|
Partners |
|
|
Featured Free Templates |
|
|
|
:: Free Website Templates
Do You Like Our Website? Share With Others!
      
Page: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25 Welcome To WebDesignTutorials.net HTML and CSS Tutorials Area - Changing table background on MouseOver
HTML and CSS Tutorial - Changing table background on MouseOver
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.
 Changing table background (click to view how it works) |
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>
|
|
Advertisements |
|
| Graphic Software, Flash Templates, Free Stock Photos, Web Templates, Web Design, Corporate Web Design, Royalty Free stock Photo, Affordable Website Design, Submit site, Add Url, Stock Photos, Survey Software, Anti Virus Software, E mail software, Computer Software |
|
