jamezb3

Hi,
 
I have created a very simple and easy to configure CSS Image Rollover Tutorial that uses only one image so there's no loading times for the rollover states, resulting in smoother transitions.
 
It works by containing the normal and rollover states in one image, we simply use the css to move the image into it's hover state when a mouse is rolled over (see attached image). It's all controlled by ul and li html.
 
I have included a .zip containing the source with comments and the image used so you can see how it works and tweak it to suit your needs.
 
CSS Code:

<style type="text/css"> #navigation ul { width: 320px; height: 30px; position: absolute; top: 100px; left: 300px; 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; height: 30px; display: block; position: absolute; top: 0; text-indent: -7000px; 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 } #navigation li.orange a:link, #navigation li.orange a:visited { left: 160px } #navigation li.red a:link, #navigation li.red a:visited { left: 240px } #navigation li.blue a:hover { background: url(menu.jpg) no-repeat 0 -30px; } #navigation li.green a:hover { background: url(menu.jpg) no-repeat -80px -30px; } #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:

<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>
 
Image: (Attached)
 
Live example: Click here
 
Easy as that! As I say the .zip contains comments within the stylesheet so you know what each element does.
 
Any questions let me know.
 
Hope you find a it useful

CSS_Image_Rollover_Tutorial.zip