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:

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.

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.

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.

Have Your Say

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.

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

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

Justin Eckles on 9th July 2009 wrote:

Ok I got it to work by using an absolute link to the image instead of a relative link. But now i have this weird spacing issues. Here’s the link

http://drexel.edu/ods/index_test.html

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!!!

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!

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

New design trend: Logos that change to show you they’re a ‘home’ link » malcolm coles

Added on 3rd July 2009

A Comprehensive CSS Development Guide For Beginners & Experts « deCode10 – trends, technologies & more …

Added on 18th January 2010

17/101 – css rollover image | myquietcorner

Added on 4th March 2010

Webvamp | Blog

Recent Posts

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.

The Old JavaScript Method

CSS Method

CSS Code

HTML Code

The End Result

Working It Further

Update

Further Reading

Share Post

Have Your Say

Comments

Michael on 2nd March 2009 wrote:

Jacob on 3rd March 2009 wrote:

Marko on 3rd March 2009 wrote:

Jacob on 4th March 2009 wrote:

Daniel on 11th March 2009 wrote:

Jacob on 11th March 2009 wrote:

John Lewis on 16th March 2009 wrote:

John Croson on 24th March 2009 wrote:

Shawn on 25th March 2009 wrote:

Shawn on 25th March 2009 wrote:

Debra on 26th March 2009 wrote:

Craig on 1st April 2009 wrote:

Jacob on 1st April 2009 wrote:

technobit on 29th April 2009 wrote:

Justin Eckles on 8th July 2009 wrote:

Justin Eckles on 8th July 2009 wrote:

Justin Eckles on 8th July 2009 wrote:

Jacob on 9th July 2009 wrote:

Justin Eckles on 9th July 2009 wrote:

Justin Eckles on 9th July 2009 wrote:

Omer Segoly on 21st July 2009 wrote:

Mark on 22nd July 2009 wrote:

myrtille on 3rd August 2009 wrote:

pyemachine on 18th August 2009 wrote:

Paul on 19th August 2009 wrote:

Zach on 21st August 2009 wrote:

Jacob on 21st August 2009 wrote:

Donna Dolorosa on 12th September 2009 wrote:

Shaun on 26th September 2009 wrote:

Jacob on 26th September 2009 wrote:

Jose on 28th September 2009 wrote:

Jose on 29th September 2009 wrote:

Phil on 25th October 2009 wrote:

Melo on 18th November 2009 wrote:

marketing belfast on 7th December 2009 wrote:

Erik on 16th December 2009 wrote:

Byron on 17th December 2009 wrote:

Erik on 18th December 2009 wrote:

Eric Lewis on 25th January 2010 wrote:

Michele on 2nd February 2010 wrote:

Anna on 18th February 2010 wrote:

Buzz Around This Post

Graphical CSS Rollover Menu - Webvamp

Basit Resimli Menü Yapmak / Fatih Hayrioğlu’nun not defteri

New design trend: Logos that change to show you they’re a ‘home’ link » malcolm coles

A Comprehensive CSS Development Guide For Beginners & Experts « deCode10 – trends, technologies & more …

17/101 – css rollover image | myquietcorner