Accessibility Navigation

ImageXY

ImageXY - Mac OS X Batch Photo Resizer

Checkout ImageXY - Painless image resizing for Mac OS X.

Quickly and painlessly bulk resize images, change image formats and create web-friendly photos for your website.

Available on the Mac App Store!

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:

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.


About The Author

Jacob Wyke is a web developer from the UK who makes complex things simple on the internet. He develops a batch image resizer for Mac OS X called ImageXY which you should try if you ever need to resize anything for the web.

You should also follow him on twitter.