Image rollovers - CSS

See also Image Map Rollovers 

a {
background-image:url(butover.gif);
width:88px;
height:31px;
background-position:left top;
display:block
}

a:hover{
background-position:left bottom
}

a{
background-image:url(butover.gif);
width:25px;
height:23px;
background-position:left top;
display:block
}

a:hover{
background-position:left center
}

a:active{
background-position:left bottom
}
  The secret here is to create a single image that contains all the button images.
This image is then used as the background and repositioned on the appropriate mouse action using background-position

An additional bonus is that the rollover images do not have to be preloaded :)

Note: if you click off a link the default image is shown.
For a Javascript remedy see Image Rollovers - Javascript

Sometimes it is not apparent that an image is being used as a link.
The following is an example of how you can add a simple animation to the image. Pass your mouse over the links

Hey .... I'm a link
Me too...
And me!

Use the following CSS attributes assigned to the hover method.

<style>
a:hover {position: relative; left:5;top:1}
</style>

<a href="yourpage.htm"><img src="yourpic.jpg" width="200" height="30" border="0"></a>