Easy Single Image Rollovers with CSS Image Sprites

With the advent of Style Sheets came the promotion of standards-based code that functions seamlessly across multiple browsers and displays correctly on most every machine out there. But, I often come across high-end websites that are based on outdated (and somewhat unreliable) CSS methods to produce an effect as simple as the common image rollover. Most older methods can give an otherwise professional site an amateur feel because they:

– use Javascript where not necessary
– cause the image to flicker on the initial rollover
– aren’t accessible to some mobile browsers or systems with JavaScript disabled
– create a rollover by using multiple images, which take longer to load and uses extra bandwidth

No need to worry though– there is a standards-compliant way to use a single image to create that flicker-free, non-JavaScript rollover that will work on any system. It uses what is known as an image sprite and its easier than you might imagine.

Take a look at this working example.

 
So, how is it done? To tell you the truth, its not much different than coding for standard hypertext markup using CSS. The only difference is the addition of some small attributes in our CSS background-position attributes that will define the position of our image at each of our rollover states. By using just one image to accomplish our goal, we will be eliminating any flicker caused by the initial image loading during the first rollover that calls a second– or third file from the server. So, by taking this step, we won’t even have to preload the alternate images by adding extra JavaScript into our page’s tag. Here is the single image used in this tutorial.

cssrollover11.jpg

The only change to our XHTML is the assignment of a class or id value to the link itself. In many cases, you will already be using one of these, so really, this part wouldn’t really be any different for you.

Here’s the HTML. Of course, you’ll need to amend your class property to whatever it will be called in your CSS.

Pretty simple, huh? Well, the CSS really isn’t too much longer.

First, we must define the properties of our a.imagesprite parameter. The width and height must be set to the size of the visible part of the image as we want it to appear on the page. In this example, we want our image to display the full width (125px) and the height of only one segment of our image (in this case, 60px). The background position for the inactive state of our image is set to 0, 0.

We’ve also included some parameters that offset our image’s alt text to keep it from overlapping the image. Omitting the tag completely is always an option, but won’t help the overall professionalism of your site. Here, we will simply push the text 15,000 pixels from the left edge of our image– more than enough to get it off the screen and out of sight without dropping it altogether.

Finally, we must set our a:hover and a:active parameters to reflect the amount we need to shift our image for each of our three rollover states. Because this example strives to create three image segments, each 60px tall, we will be shifting that image up by 60px to display each successive segment. When done properly, this should create the illusion of calling a new image without any lagging or flickering that other methods may cause.

And, there you have it… a standards-compliant, accessible, single-image rollover that doesn’t use any JavaScript or cause unwanted image flicker. If you would like to use this in multiple instances for different rollovers on the same page, just paste the HTML where you want it and duplicate the CSS, making sure to replace imagesprite with the name of your new rollover parameter.

Dave Winter focuses in WordPress UI Design and WordPress Plugin Development (some have labelled him a fanatic) but has hands in many other projects, including photography and music. He's never far from a computer... or an iPad (for testing purposes, of course). If you've been to a WordCamp in Southern California, he probably already knows who you are (or maybe not - he's terrible with names). Dave currently teaches courses at California State University, Long Beach alongside his small business at dauid.us (and his students think he's pretty boss).

Comments

  1. Dave Winter says:

    Glad it helped!

  2. EditDiva says:

    Brilliant! Oh, thank you so much for this lovely tutorial. I’ve always wanted to do this, but as a self-taught flailing WordPresser, I never could figure out how to get a graphic rollover to smoothly and reliably load & display. But you explained it simply and made it so easy, not even I could mess it up!! I’ve already made two this morning.
    So, thanks!!! You rock.
    🙂

  3. Hi there. I too am wanting to know if this could be applied to a WordPress featured image display to get a different image on rollover? Would love to know how to implement this, please. Thanks, and hope to hear from someone soon!

    • Dave Winter says:

      You’d need to change the way your theme handles featured image creation, in order to use this with WordPress featured images. Most themes automatically crop featured images to predefined image sizes and then call the appropriate size image from within the template files. So, you’d need to override how your theme does all this.

      I think a better solution would be to use Advanced Custom Fields (or another custom fields plugin) to create a ‘rollover’ image field for your pages/posts. Then, you could easily apply this method to that custom image. You’d want to edit your theme’s template files to display that custom image and rollover, rather than your featured image.

      Of course, this might wreak havoc with responsive images in more modern themes.

      Hope it helps!
      Dave

  4. Hello Dave,

    Do you know if it’s possible to add a “visited” state to an image sprite?

    • Dave Winter says:

      Carol,

      It should be possible to do this. You’d just need to use the appropriate CSS for a visited state, then add a 4th frame to your image. I can see very limited applications for doing this with a rollover image, however – perhaps it would be useful for indicating whether a user has completed a certain task.

      Dave

  5. Dave, do you know if this could be applied to a wordpress featured image display to get a different image on rollover?

    • adding reply for email noficiation

    • Dave Winter says:

      Mike,

      Firstly, my apologies for not seeing this comment when you posted it – I usually try to do better at that.

      Please see my comment to Heather, in regard to using my rollover image method on featured images.

      Dave

  6. Thanks!!

  7. I have this working as instructed, but how do I attach a hyperlink to this active state? I’m hoping getting this rollover to link out to a page is just as easy (fingers crossed)???

    • Dave Winter says:

      Chad,

      You should be able to just wrap the div in a link.

      There really isn’t a way (that I know of) to only make the link available for the active state. You’d have to make it available for the entire div. But, that shouldn’t be a problem.

      Dave

  8. I needed to make a rollover image for Computer Science class. A lot of websites showed me how to do it with multiple images, and a lot of other websites told me to make an image sprite but didn’t completely explain how to use it. I used SpritePad to generate an image sprite and the CSS that goes with it, and was then left with one huge question: what am I supposed to write in HTML for all this CSS to act upon? Thank you for answering this question AND explaining how the rollover image works!

  9. Thank you! This did the image sprite hover / active trick.

  10. Wow, I didn’t realize you could make a rollover without javascript. I will definately use this on some of my projects coming up. Thanks a ton!!

    • Dave Winter says:

      I’m glad this short tutorial could be of some assistance to you. Hope everything is working the way you need it to.

Let me know what you're thinking

© 2008-2017, dauid.us