Image Rollover

Demo

Save supporting images to your images folder. (0.jpg), (1.jpg).

HTML

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

Now have a look at CSS

.rollover{
border: 1px solid #000000;
border-collapse:collapse;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
text-align:center;
font-weight:bold;
background-image: url(images/0.jpg);
display: block;
height:30px;
width:100px;
line-height:30px;
}
.rollover:hover{
background-image: url(images/1.jpg);
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-weight:bold;
}