Image Rollover

Demo

Save supporting images to your 'images' folder. (rollover_off.jpg), (rollover_on.jpg).

HTML

<table cellpadding="0" cellspacing="0" class="rollovercss">
<tr>
<td><a href="#">Home</a></td>
<td><a href="#">About Us</a></td>
<td><a href="#">Services</a></td>
<td><a href="#">Packages</a></td>
<td><a href="#">Contact Us</a></td>
</tr>
</table>

Now have a look at CSS

Table.rollovercss A{
display:block;
height:37px;
width:120px;
font-family:'Trebuchet MS',Arial, Helvetica, sans-serif;
font-size:20px;
color: #0071A4;
line-height:37px;
text-align:center;
background-image:url(images/rollover_off.jpg);
border: 1px solid #FFFFFF;
border-collapse:collapse;
}
Table.rollovercss A:hover{
background-image:url(images/rollover_on.jpg);
font-family:'Trebuchet MS',Arial, Helvetica, sans-serif;
font-size:20px;
color:#FF9900;
}