Recent Posts
- Quick Code: Get the domain name in JS
- Things to think about when designing a logo
- Javascript Array Functions
- Integrating FCKEditor to save current content with AJAX using PHP
- Pad A Javascript Number
- Why use heading tags as opposed to font tags for displaying text in HTML?
- Creating One Time Download Links
- Why Javascript in Forms is Bad
- Five Things To Remember When Designing Accessible Web Pages
- Sizing Images Correctly – Part Two
Topics
CSS Image Rollovers
Many sites out there still use an old JavaScript technique to produce an image rollover for menu items or buttons. This is bad for many reasons and today we will learn how to achieve the same effect using CSS.
Before we learn the CSS method, let’s look at the JavaScript rollover and see why it’s a poor alternative.
The Old JavaScript Method
In this method people tend to use a simple piece of JavaScript attached as an attribute to the link or <img> they want to change.
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About Us','','images/about_us_over.jpg',1)">
<img src="images/about_us_up.jpg" alt="About Us" name="About Us" width="81" height="91" border="0">
</a>
Often times developers won’t pre-load all the images and so you end up with a flicker effect where nothing is shown while a second image loads and leaves the site looking slow and un-professional.
As well as this blink effect, this method also suffers from:
- requiring JavaScript to be enabled and doesn’t gracefully degrade.
- needing at least 2 separate images and so multiple HTTP requests to the server (this slows the page loading down).
CSS Method
The CSS method uses what is known as an image sprite to load all the rollover effects as a single image and we then use CSS to do the transition. To create the image sprite just create a single image containing all of the individual transitions as shown below.
![]()
Once you have your image sprite you just need the HTML and CSS code:
CSS Code
a.rollover {
display: block;
width: 150px;
height: 44px;
text-decoration: none;
background: url("webvamp.jpg");
}
a.rollover:hover {
background-position: -150px 0;
}
.displace {
position: absolute;
left: -5000px;
}
HTML Code
<a href="#" class="rollover" title="Webvamp"><span class="displace">Webvamp</span></a>
Most of this is hopefully understandable, but there are a few things to note:
- The width and height values in a.rollover are the size of the original image.
- The value of background-position is that of the original image width – since we are literally moving from one part of the image sprite to another.
- We have included a <span> tag with a text alternative to the image and displaced it off the side of the visible screen so that screenreaders will read it and in the event of no CSS support a text link will be shown instead.
The End Result
The following link is the example of a CSS image rollover. You cannot see the example function unless you have CSS enabled.
Roll your mouse over the button above and see how it instantly changes to the hover effect. Feel free to also check it out with your CSS disabled to see the text link.
Working It Further
The example above is a very simple example of a CSS rollover. You can develop it further to provide different transition effects for when the link is clicked or active. Apple.com has a very good example of this with their main navigation bar.

They include all four states of the navigation bar into a single image and then transition between them when a user hovers, clicks or views a section.
Update
After Marko’s comment I had added a second post showing you how to make a full menu bar using CSS rollovers.
Further Reading
Have Your Say
Comments
-
Jacob on 3rd March 2009 wrote:
Hi Michael. Yeah you need to add a new CSS class for each image to define the location within the image sprite.
Don’t worry about ending up with loads of CSS as in reality you will only have like half a KB of CSS and it won’t effect your load speeds as much as multiple server calls that are required for separate images.
-
Marko on 3rd March 2009 wrote:
Great tutorial. I’m just wondering about the advanced example you mentioned regarding apple’s navigation. I’d like to transition the image when a user is looking at a certain section of my website.
For instance, if they are at Home, that image would be different from the rest of the links. Once they click on Contact, then that would become the active image. For me, it seems that a.rollover:active is behaving more like the “clicked” example, as the image only changes on click and doesn’t stay that way.
-
Jacob on 4th March 2009 wrote:
Hi Marko,
I’ve posted a quick new post showing you want to do for a whole menu like the Apple one.
http://www.webvamp.co.uk/blog/coding/graphical-css-rollover-menu/
-
Daniel on 11th March 2009 wrote:
Hello great tutorial however I’m having issues I can not seem to get an image using the CSS Style. Here is my html code and css code now the css is in a css folder and the image is in an images folder Tell me what’s wrong please thank you.
CSS Code.a.rollover { display: block;
width: 100px;
height: 25px;
text-decoration: none;
background: url(”images/tabsf.gif”);
}a.rollover:hover {
background-position: -100px 0;
}.displace {
position: absolute;
left: -5000px; }THE HTML CODE
css style<a href=”#” title=”TabsF” rel=”nofollow”>TabsF</a>
The image is left to right like shown in example and named tabsf.gif I have internet explorer 7.0
All of the tutorials I’ve tried will not get image
-
Jacob on 11th March 2009 wrote:
Hi Daniel,
Make sure that you give the link element the ‘rollover’ class.
And then also make sure that the link to the image is correct in the CSS. Try it with an absolute URL to ensure it finds the image.
Jacob.
-
John Lewis on 16th March 2009 wrote:
MAGIC!! Sheer MAGIC. Bless your cotton socks for a wonerful tutorial and an excellent method.
-
John Croson on 24th March 2009 wrote:
Awesome article for me, since I’m always looking for better and cleaner methods for skinning DNN.
Thanks.
-
Shawn on 25th March 2009 wrote:
I’m trying to create a web template that will alow me to change colors, images, and text quickly and easily to fit the clients needs. I Combined a text rollover with your image rollover in attampts to makes it easier to change the text and color of the buttons. This idea works eccept that the valign of the text won’t stay in the center of the table cell even with the use of valign=”middle”. Any sugestions?
Here’s the web site:
http://www.sightmarkinc.com/templates/Here’s the css code I used:
a.rollover {
display: block;
width: 176px;
height: 28px;
background: url (”images/sprite_1.jpg”);
color: #FFFFFF; text-decoration: none; font: normal 18px;
}
a.rollover:hover {
background-position: -176px 0;
color: #000000; text-decoration: none; font: normal 18px;
}
-
Debra on 26th March 2009 wrote:
Love you tutorial.
I’m wondering how to create a CSS that would show two text links on one image that a user can click on? Example of text on image with a link for each (depending on which one is the mouse over.
member
——
non member
-
Craig on 1st April 2009 wrote:
Jacob,
This is really a great tutorial. However, I have a question.
Is there a way to create rollovers like this that use different images, and tile down the page? I’m trying to create a menu with rollover images that has about 12 separate items, but if I use the same code and just swap the images in the background attribute, I just get the same image all the way down the page. Is there a way to do this without using tables, or without having the images in a single line?
Thanks
-
Jacob on 1st April 2009 wrote:
Hi Craig,
Does this other post help?
http://www.webvamp.co.uk/blog/coding/graphical-css-rollover-menu/
If your getting the same image down the page it sounds like you are not changing the positioning of the background to show the correct image.
The element that you create is like a window and you have to position the background in the correct place to view what you want out of the window.
Jacob.
Buzz Around This Post
-
Graphical CSS Rollover Menu - Webvamp
Added on 4th March 2009
-
Basit Resimli Menü Yapmak / Fatih Hayrioğlu’nun not defteri
Added on 10th March 2009
Michael on 2nd March 2009 wrote:
Love the tutorial for this! But I’m wondering how the CSS would change with multiple ‘BUTTONS?’ Let’s say I use the method on my nav buttons. How would I make all of them different? Would I need to put a rollover_home, rollover_forums, class declarations in my CSS for all the different button images?