Accessibility Navigation

Recent Posts

Topics

CSS Image Rollovers

Posted on 25th February 2009 by Jacob

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:

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.

Image showing two images being merged into a single image.

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 End Result

The following link is the example of a CSS image rollover. You cannot see the example function unless you have CSS enabled.

Webvamp

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.

Apple.com navigation image sprite

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

Have Your Say Form









Comments

  • 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?


  • 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.


  • 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;
    }


  • Shawn on 25th March 2009 wrote:

    Never Mind. I just figured it out.

    Excellent tutorial.


  • 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.


  • technobit on 29th April 2009 wrote:

    Ohh yeah make the technology useful for humans who love technology! guys keep up the good spirit.

    aha……
    Technobyte


Buzz Around This Post