Ades Design - High Quality Website Templates, Free Website Templates, Tutorials: Photoshop, Dreamweaver, Flash, CSS and PHP


Changing table background on MouseOver
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.

Color Picker for your AdSense job more info



Web2.0 Bookmarks - Social bookmarking is good, but old skool way of hand-picking sites is better!
That's what we do best, collecting the coolest WEB2.0 sites. click here

 


Advertise | AdesBlog New | Free Templates | Premium Templates | Products | Services | Portfolio | Contact

2002 - 2007 Ades Design. All Rights Reserved. http://www.adesdesign.net

 









Logo Design, Web Design, Graphic Design (Cartoons, Caricatures etc.)
Software Development Company 
Search Engine Optimization by Design
Logo Design
 
Advertise Here