The Blog

The Right, Easy & Quick Way To Do CSS Image Rollovers

Posted on 10/07/09 in blog, development about CSS, HTML, tutorial

We (me) all get lazy sometimes and tend to skip this particular type of CSS development, especially when we (me) decide to launch their portfolio in one weekend. The proper way to do image rollovers, is to use a sprite. Why? This avoids the pause between loading the hover image; and it also negates the necessity of doing a background div, so there isn’t a blank space between the pause. Since we redid my navigation to expand yesterday, let’s redo the rollovers to a proper sprite.

Step 1: The Rollover

Now what we need to open first in Photoshop is both our background repeat nav and our hover nav files (or whatever you’re using as a background and hover). Here is my navigation repeating background:

And here is the navigation repeating rollover:

Now we need to take these two images and combine them into one. Double the height of your canvas on your regular background repeating image, and place your rollover underneath it like this:

What this is going to do, is allow us to use one image for both the background and the rollover. This prevents the blinking, or pause, at rollover because your browser only has to load one image and since it already loaded to show the regular background, it shows the rollover immediately.

Step 2: The HTML

The HTML is simple, just use your regular navigation code or “a” tags. We’ll take a simplified version of my HTML code from yesterday:

<a href="link.html">Link</a>

Step 3: The CSS

Now what we’re going to do in the CSS is very similar to a regular hover, except we’ll use the same image, and tell the hover to state to move down for our hover. Confused? Let’s see it in action:

a { float: right; height: 40px; padding: 7px 10px; background: url('images/navRepeat') repeat-x; }

Just a regular background declaration

a:hover { background-position: 0 -59px; }

The numbers after the background specify the position of the background. The first number controls left to right with positive and negative numbers; the second controls up and down-with a negative moving the background down.

That’s it. Yup, it was that simple. To see it in action, check out my actual navigation. No pauses or blinks. Nifty eh?

This is the proper way to do image rollovers, although admittedly, I don’t always do it (I should). It doesn’t take any more time really, when you do it up front with the rest of your coding and it really does look a lot more finished in the end. And no use of javascript is also a plus

About the author
Amber Weinberg specializes in clean and semantic XHTML, CSS and WordPress development. She has over 10 years of coding experience and is pretty cool to work with. Amber is available for freelance work, so why not hire her for your next project?

Tweet