This is a simple guide on how to create a rollover image / hover menu using CSS and HTML.

The advantages of this are:

+ No need to download 2nd image for rollover effect as 1 image is used for all images = faster browsing
+ Easier to edit and adjust
+ Compatible on older browsers

This method works by combining the no rollover image and rollover image together and use css to quickly align the images height and width, for example like this image:



The image above is an example of creating 4 rollover images (one is dark and the other is lighter which is the rollover image).

CSS:

HTML Code:
<style type="text/css">

#navigation ul {
    width: 320px; 
    height: 30px; 
    position: absolute; /** Places image at the top of the page **/
    top: 100px; /** Determines the height from the top of the page **/
    left: 300px; /** Determines the width from the left of the page **/
    background: url(menu.jpg) no-repeat 0 0;
    list-style: none;
    margin: 0; padding: 0;
}
#navigation li {
    display: inline;
}
#navigation li a:link, #navigation li a:visited {
    border: none;
    width: 80px; /** width of the button in active state **/
    height: 30px; /** height of the button in active state **/
    display: block; 
    position: absolute; 
    top: 0; 
    text-indent: -7000px; /** Removes li text from the screen **/
    outline: none;
}
#navigation li.blue a:link, #navigation li.blue a:visited { 
    left: 0;
}
#navigation li.green a:link, #navigation li.green a:visited { 
    left: 80px  /** how many px left of the first button i.e blue **/
}
#navigation li.orange a:link, #navigation li.orange a:visited { 
    left: 160px  /** how many px left of the first button i.e blue **/
}
#navigation li.red a:link, #navigation li.red a:visited { 
    left: 240px  /** how many px left of the first button i.e blue **/
}

#navigation li.blue a:hover {
    background: url(menu.jpg) no-repeat 0 -30px; /** moves image up 30px  showing the rollover states **/ 
}
#navigation li.green a:hover {
    background: url(menu.jpg) no-repeat -80px -30px; /** moves image up  30px and right 80px showing the rollover states **/
}
#navigation li.orange a:hover {
    background: url(menu.jpg) no-repeat -160px -30px;
}
#navigation li.red a:hover {
    background: url(menu.jpg) no-repeat -240px -30px;
}

</style>
HTML:

HTML Code:
<div id="navigation"> 
        <ul>
                <li class="blue"><a  href="#">Blue</a></li>
                <li class="green"><a  href="#">Green</a></li>
                <li class="orange"><a  href="#">Orange</a></li>
                <li class="red"><a  href="#">Red</a></li>
        </ul>
</div>
Here is a live example from my old site: Zellomesh.com - Not Another Flash Site

If you look at the main menu you will see it auto rotate when you hover over an image.

Hope this helps and is more easier to follow.