Accessibility Navigation

Recent Posts

Topics

CSS Image Rollovers

Posted on 25th February 2009 by Jacob Wyke

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


  • Justin Eckles on 8th July 2009 wrote:

    I’ve copied the code almost verbatim and its not working. Here’s what i got.

    CSS:

    a.rollover {
    display: block;
    width: 83px;
    height: 32px;
    text-decoration: none;
    background: url(“images/Faculty2.jpg”);
    }

    a.rollover:hover {
    background-position: -83px 0;
    }

    .displace {
    position: absolute;
    left: -5000px;
    }

    HTML: <a href=”index.html” title=”Faculty” rel=”nofollow”>Faculty</a>


  • Justin Eckles on 8th July 2009 wrote:

    Sorry here is the HTML

    <!–<a href=”index.html” title=”Faculty” rel=”nofollow”>Faculty</a> –>


  • Justin Eckles on 8th July 2009 wrote:

    its the same just replace webvamp with faculty


  • Jacob on 9th July 2009 wrote:

    @justin It looks like your just missing the class from the link – class=”rollover”.


  • Justin Eckles on 9th July 2009 wrote:

    Its still not working and this what i have now for the html

    Faculty


  • Omer Segoly on 21st July 2009 wrote:

    Great article. Thank you!


  • Mark on 22nd July 2009 wrote:

    Hi Jacob,

    I was wondering if you could tell me what .css this needs to go into? Currently I am working on a client site, they are Realtors, this is a Property Management I am building for them. http://eurekamedia.net/exitpm once done, we will move their site to its own domain. She is wanting 2 buttons on her Contact Us page that basically do a mailto function with populating some data in the message, one will be for Property Owners wanting to rent, that one will go simply to the realtor, the other will be a Tenant one for people looking to rent. On that one, she wants the email to go to the office email, with a carbon copy going to her. Also, is there a way to program the button to do a mailto, but also display a box with the realtors personal cell phone number being displayed? Thanks for the help so far already with this awesome tutorial. Cheers, Mark!


  • myrtille on 3rd August 2009 wrote:

    Hi there. Does anyone know if and how it is possible to make a multilevel menu (menu with submenu) using image rollovers and only css?
    thanks!


  • pyemachine on 18th August 2009 wrote:

    nice one bruvva. perfect tut for what i was looking for


  • Paul on 19th August 2009 wrote:

    Brilliant, worked a treat – just what I was looking for SEO friendly roll-overs.


  • Zach on 21st August 2009 wrote:

    Hi, it works great when I put the css in the header of the html page, but when I use an external style sheet the image doesn’t show up at all. Any thoughts? I’m using the same exact code in both places.


  • Jacob on 21st August 2009 wrote:

    @Zach – Make sure that you are including the stylesheet correctly and that any paths to the images used are correct as often external stylesheets are in different directories and so you need to use full path names.


  • Donna Dolorosa on 12th September 2009 wrote:

    Lovely tutorial – thanks a million for it. I’ve always hated the old Javascript method, so this is a breath of fresh air and of course more semantically appealing.


  • Shaun on 26th September 2009 wrote:

    Thanks for the tutorial. Another way to hide the link instead of positioning it 5000px off the screen is to use “display: none;”. It’s been rumored that Google penalizes websites for stuffing elements with keywords and positioning them out of view, but “display: none” is acceptable because it’s commonly used for AJAX. You can see this alternative example by viewing the logo at http://www.linkbump.com.


  • Jacob on 26th September 2009 wrote:

    @shaun – Thanks for the comment. I have not used display:none as most screen readers skip hidden content so they wouldn’t be able to see what the graphical menu item said.


  • Jose on 28th September 2009 wrote:

    Working great thanks, just have one Mega noob question though, I’m creating multiple rollover images (using rollover_dog, rollover_cat) and they are working fine but they are lining up vertically. How do I make them line up horizontally. I’m trying to get 3 images to line up one after the other. Like I said, mega noob question and I’m sure I’ll hit my head at the response.


  • Jose on 29th September 2009 wrote:

    Ok, i found a way to make this work, don’t know if it is the best way but it works. I added floats to the beginning of the html. Ex: Education


  • Phil on 25th October 2009 wrote:

    This is a great tutorial as already has been mentioned, so thanks for that. Ive used it of a few different sites with varying degrees of success.

    On one of the newer sites im building, I have found that im hitting top10 in google for the term Webvamp!! And twice in the top 20!

    A closer inspection shows a couple of other sites up there who have forgotten to rename the links properly, one of them I quite like the example being katmatika.net (not mine) It is also top 20 and it is pure webvamp, quite funny.

    So I guess the lesson is, dont forget to rename your links! And on another note dont underestimate the power of keyword stuffing ;-)

    Ok on a more lesson based note- I would like to use this technique in a different way – ie By have one page of images to cover them all, is this possible with this technique and what are the pros cons of this?


  • Melo on 18th November 2009 wrote:

    Great Tutorial. Thanks.

    I’m curious however, how accessible are these buttons. Let’s say for example someone sets their browser to not load images, will anything appear there at all? Would it be good if some text could appear there in place of the img? Like what the alt text in am imaged does?


  • marketing belfast on 7th December 2009 wrote:

    I dont know about the CSS code but i would love to teach about the Basic HTML code cause its simply easy and easy to create.


  • Erik on 16th December 2009 wrote:

    Hey, im having trouble getting this to work. Im making a website. Ive read heaps of tutorials and none of them work.
    The basic idea that i have in mind is a menu to the left of my page with the buttons…on rollover they change appearance to show activity.
    heres the snippets of what i have so far:

    CSS:

    a.homeb {
    width: 250px;
    height: 35px;
    background-image: url (“buttons/home.png”) no-repeat;
    display: block;
    }

    a.homeb:hover {
    background-position: 0 -35px;
    }

    .displace {
    position: absolute;
    left: -5000px;
    }

    HTML:

    <a href=”#” class=”homeb” title=”homeb” rel=”nofollow”>Home</a>

    my images original size is 250×70. My image is a top-to-bottom type, unlike the tutorial.

    Thanks heaps!!


  • Byron on 17th December 2009 wrote:

    Alright Micheal

    Why do I need to create the hover image and nav image in the same image?

    A little bit confused on that one :)


  • Erik on 18th December 2009 wrote:

    haha, dont worry bout my post, i fixed it!!! :P :D


  • Eric Lewis on 25th January 2010 wrote:

    This was a great tutorial, and I used it right away on a client site. Thanks!

    One question, from the client, and I don’t know the answer. This problem happens with JS and css rolover in diff browsers. When a user follows a link in a rollover and then uses the back button on the browser, the ‘down’ or ‘over’ state persists when the page is reloaded. Why is that? cache? Can it be prevented?


  • Michele on 2nd February 2010 wrote:

    I’m trying to create code for a LH square rollover button that once hovered over triggers a hover button as well as to to the righthand area of the button, a separate wider and longer rectangular text box that will appear containing a paragraph (CSS code preferable).

    btw, the LH square buttons are images.

    Thanks for your time.

    Michele


  • Anna on 18th February 2010 wrote:

    This is fantastic – thank you!


  • Tim on 12th March 2010 wrote:

    Absolutely fantastic!

    Worked like a charm, and is even less involved than some other tutorials to accomplish the same thing.

    Perfect.


  • Kit on 4th April 2010 wrote:

    Nice. This functions just fine in a web page, but it fails totally when using it within HTML eMail content. The images vanish.
    I’d really appreciate it if someone would tell me how can I make it perform in the body of an HTML eMail.


  • justine on 11th May 2010 wrote:

    Hi. I am trying to move the whole button to the right on my page, but whatever I try makes the rollover wacky. Any suggestions on page position of the button?
    Thanks!


  • Jacob on 12th May 2010 wrote:

    @Kit – You will need to double check to see what css options certain email clients allow- most do not allow background images and so you may have to tweak the code to use image sprites instead.

    @justine – You need to right align the parent div. Check out the updated post (link at the end of the tutorial).


  • Mikey S on 25th May 2010 wrote:

    Excellent tutorial, probably the easiest, nicest way of making a rollover button from an image.

    I do have one massive problem though – my image is now showing the classic 1px dotted border when I click on it.

    I tried using CSS to get rid of the border (like “border-style: none”), but can’t seem to get it right, as I’ve never linked an image in this way. Any help would be greatly appreciated!!


  • Sarah on 30th May 2010 wrote:

    I like this code very much, and I’m using it on my site, but my visitors are saying it doesn’t work in firefox. Is there a way to make it work in all browsers?


  • jacquelyn on 13th August 2010 wrote:

    thanks for this tutorial…i have been using javascript so that in addition to an iconic image changing to a hover state, a text link elsewhere on the page would also change to a hover state. can this be done only in css?


  • Jacob on 13th August 2010 wrote:

    @jacquelyn – Only if the text link is within the same block so the hover event can display it – but you can then use positioning to put it whereever you want on the page.


  • Thinking Forward on 23rd August 2010 wrote:

    I’m using CSS for rollovers on our site. It works really well.


  • santirri on 10th September 2010 wrote:

    Hi,

    This was what i was looking for… Only one thing that troubles me is the fact that i want some (html) text next to the imagerollover, so when u rollover the (html) text the text color changes, but also the image jumps (as in this example).

    Anyone some tips or help whit this ?

    Thanks in advance,
    S.


  • George Dall on 4th November 2010 wrote:

    “To create the image sprite just create a single image containing all of the individual transitions as shown below.” Not sure what you mean by the above as there are 4 images.


  • Jacob on 12th November 2010 wrote:

    @George Dall – You begin with 4 seperate images and then merge them into a single file. So image1.gif, image2.gif, image3.gif, image4.gif get put into a single image called sprite.gif. If each of your source images are 100x50px – you merge them into a sprite image that will end up being 100x200px. Make sense?


  • Andre on 8th December 2010 wrote:

    The ‘block’ display method in CSS really is amazingly useful, not only for images (as covered here) but for text blocks as well.

    It’s just personal preference, but I prefer to specify the image with inline styles, this way the same basic CSS code can be reused with multiple images. You still need to remember to account for different sized images, but this way I find it easier to track down and edit later.

    In CSS:
    a.rollover {
    display: block;
    width: 64px;
    height: 64px;
    text-decoration: none;
    }

    a.rollover:hover {
    background-position: -64px 0;
    }

    In HTML:


  • Chris F J Cyrnik on 15th December 2010 wrote:

    Can I get this to work in Blogger?

    Thank you.


  • Jacob on 16th December 2010 wrote:

    @chris – If you can enter html and CSS then yes. I’ve never used blogger so can’t tell you from first hand knowledge.


  • Creative Shooter on 20th December 2010 wrote:

    Helpful tutorial for a css beginer like me. Thanks


  • Online Classes For Teachers on 25th December 2010 wrote:

    Hey this looks great. Although I dont understand it at all. LOL. I was referred here by someone at the Headway WordPress theme forum who said they finally accomplished their image rollovers using the method at this page. Unfortunately that post is closed for comments and I cant get in touch with the forum user who posted the link to here.

    My question is, how would I implement this on a WordPress site for my images? REMEMBER, I am a complete newbie to all this stuff and try to stay away from any coding. I have tried the “Image Mouseover” plugin, but Im pretty sure it uses the evil old js method.

    My goal is to be able quickly and easily create and apply a rollover to any image on my WordPress site that I choose.

    thanks!
    Jesse


  • FrancoisM on 29th December 2010 wrote:

    Thank you so much! I’m really new to website design (I’m using joomla) and this is a wonderful tutorial (it did cost me about half an hour to get it right ahaha)


  • Trina on 13th January 2011 wrote:

    Great tutorial! I’m new to CSS and got the button rollover to work but what if I have 4 additional rollover buttons to code? It’s for a vertical nav/menu. Help! Thanks much!


  • Fred on 17th January 2011 wrote:

    Great tutorial, and I would love to use this technique, but here is my problem: I have word lengths of different size in my menu, so i can make my images all the same height, but differ in width (depending on word length) is there a solution to this? thanks!


  • oli on 10th February 2011 wrote:

    hi im wondering if anyone can help me. i have menu system that is image based, when you hover over a link the image will change. however i need to load another image in another part of my page when hovering over the links. This was easy to do with javascript, I cant work out how to do this with sprites though. i found building the initial part of my menu easy. any help or suggestions would be appriciated


  • dan on 7th April 2011 wrote:

    nope. this does not work as illustrated.


  • Jacob Wyke on 7th April 2011 wrote:

    @Dan – What’s your problem? Have you got the initial image showing? Have you got a basic hover event working? Can’t help you out without any details.


  • Andrew Wood on 8th April 2011 wrote:

    If I was making a sidebar on the left side of my site (2-column layout) with a vertical row of these “rollover image links”, how would I center them?

    I can’t seem to figure it out.


  • Jacob Wyke on 8th April 2011 wrote:

    @Andrew Wood – You would have the left menu within a div, and you then apply margin: auto; to the menu items and give them a fixed width. Everything would then be centered in the menu, and you would be responsible for ensuer your images had the text centered etc.


  • Michael on 15th April 2011 wrote:

    Many thanks for this Jacob. Saved me a lot of messing around, and it works superbly.


  • Amanda on 30th April 2011 wrote:

    Works great! Thanks for posting. :]


  • Albert on 4th May 2011 wrote:

    I notice that in IE the rollover image shifts 1 pixel. It looks fine in FF, Safari and Chrome. Is there a fix?
    Thanks.


  • Ros on 9th May 2011 wrote:

    i am trying to add comments using “onmouse over” to different areas of a large image… kind of like alt tags show ….I found a lot of code that shows how to rollover images but how would i do it to different areas of the same image for different comments?


  • Lauren Devine on 29th September 2011 wrote:

    AWESOME fix…easy to understand for those of us more geared for UI design that for heavy coding :) Thank you SO much :) Works great!


  • vinay on 11th November 2011 wrote:

    i have copied and its working good


  • samantha on 13th December 2011 wrote:

    This works great but I don’t know which page I am on in the site. Is it possible to make the image stay with the rollover color when on the clicked page? Example: http://schoolhousecommunications.com/QM


Buzz Around This Post