This tutorial is very simple and easy to follow, and you can use this for image roll overs, buttons, and navigation…  Once you’ve done this a couple times it becomes very simple.
CSS Rollovers can be done with either two images or one single image.  I prefer to always do only one image as it allows for faster loading.
The first step is to make our images.  For this example I used an image with a height of 25px and a width of 100px.
For this tutorial because we are only using one image we will have to double the height.  Make sure when you make your image that you have it aligned perfectly so the roll over looks smooth.  Here is a demo first (more…)