April
3rd, 2008
Extremely efficient image rollovers using CSS sprites and NO Javascript
Recently we’ve seen the death of javascript rollovers. But rollovers aren’t such a bad thing. However, they generally required the use of multiple images and Javascript which would handle mouseover and mouseout events. I think this is why they lost their appeal. There’s got to be a better way, right?
Getting the ingredients
Using a single image and some CSS we can emulate rollovers from the good ol’ days. We’ll only need two ingredients to make this happen.
- A single sprite graphic (we’ll use one similar to the tabs above)
- 2 extremely simple CSS rules
Here’s the sprite image:
Adding some sprite
Let’s start with the sprite graphic. The one I’ll use for this example is two tabs placed on top of one another. The position of the top tab is 0,0 to 102,46. The position of the bottom tab is 0,46 to 102,92. These numbers will come in handy when we define the CSS for the sprites. The sprite definitions will look like this:
a:link.sprite, a:visited.sprite{
background:url(/images/sprite.png) no-repeat top left;
background-position:0px 0px;
width:102px;
height:26px;
padding-top:20px;
display:block;
}
a:hover.sprite{
background-position:0px -46px;
}
Basically, we’ve just defined two states for the link. the default state uses the sprite image as a background and aligns the top left corner to the anchor. We go ahead and define the width, height and padding so that the anchor will display the entire tab. Anchors are inline elements so we make them block level elements so that we can size it to the tab.
Repositioning the sprite image
The second state just re-positions the background image so that the bottom tab shows up. We do this essentially by sliding the background up 46 pixels. Now we’re ready to write the html.
Rock On So Easy
Here’s an example of what that looks like.
That’s the basic idea. You can add any additional CSS needed to incorporate it into your site.
As always…comments welcome.
and living in Sunnyvale, CA.
April 12th, 2008 at 12:40 am
This is so brilliantly simple, plus there’s no extra load time for double the graphics.
Way to go man…
April 16th, 2008 at 11:47 am
Thanks for the kudos. I had originally set out to make a really simple javascript implementation which used sprites but ended up doing it this way which I was very happy to find.
April 17th, 2008 at 11:52 pm
broken image / demo..
April 18th, 2008 at 1:25 am
@Henry, Sorry about that. Result of a git merge gone bad. Should be back now.
April 27th, 2008 at 11:15 pm
awesome!! I love this.
minor issue…maybe
The images don’t seem to work for me unless I take out the leading slash from background:url
code included in the tutorial (didn’t work for me)
background:url(/images/sprite.png)
this worked for me
background:url(images/sprite.png)
April 30th, 2008 at 10:32 pm
The leading slash may or may not be required based on your site’s directory structure. Glad you figure out how to get it working.
May 13th, 2008 at 1:45 am
Well – thats the most elegant solution I have seen in a while – FAB – thanks
November 28th, 2008 at 4:04 am
An efficient method with 2 images (no preload problem):
<style>
img.nohover {border:0}
img.hover {border:0;display:none}
A:hover img.hover {display:inline}
A:hover img.nohover {display:none}
</style>
<A HREF=”#”>
<img src=”b1.gif” class=”nohover”>
<img src=”b2.gif” class=”hover”>
</A>
December 1st, 2008 at 12:04 pm
I love using this technique: one image and clean html.
Dave Shea presented this idea back in ‘04 on AListApart.com, and uses one image to roll over as many links as you need. The links are all in an unordered list.
December 1st, 2008 at 9:16 pm
@Alfonso, thanks for offering up an alternative solution. If for whatever reason you can’t do sprites then that’s definitely a good 2nd choice.
March 22nd, 2009 at 12:40 pm
Im having some trouble with CSS rollovers in IE6 how did you get this to work in IE6?!
May 20th, 2009 at 7:38 pm
I call shenanignas! Looking at your source code I see javascript for your example rollovers. Cheater!
May 20th, 2009 at 7:43 pm
@billy, are you sure about that? ;)
#header ul li a:link{ background: transparent url(/images/sprite-aaa.png) no-repeat scroll 0 -63px; }
#header ul li a:hover { background-position: 0 0; }
May 20th, 2009 at 7:44 pm
@billy, you must mean the javascript:void(0); … that doesn’t affect the rollover. It’s just a quick hack to keep the link from going anywhere.
May 21st, 2009 at 1:17 am
@billiy
“You cant just go declairing shenanignas on innocet people. Thats how wars get started” ;-)
August 5th, 2009 at 8:41 pm
good article, I find topic similar all over internet, but not yet find a topic that talk deep into using sprite of large scale, which is a major hedache if you try to ram 50+ image in one background, and still maintain the image size edge and the efficiency.
August 31st, 2009 at 1:08 pm
Great solution! How well does it scale though? If the user enlarges the page, will the link’s image scale correctly along with the page text?
September 1st, 2009 at 12:31 am
@Art, I’m not sure if I understand your question. It scales like any other image based rollover would.
September 1st, 2009 at 2:41 pm
hmmm… Why do you need “# padding-top:20px; ” when you have background position as 0?
September 11th, 2009 at 12:28 pm
If I may suggest something :
a.sprite{
background:url(/images/sprite.png);
width:102px;
height:26px;
display:block;
}
a:link.rollover,a:visited.rollover{
background-repeat:no-repeat;
background-position:left top;
}
a:hover.rollover,a:active.rollover{
background-repeat:no-repeat;
background-position:left bottom;
}
…
this way you decide with the second class if the image is rollover. And with the position “top” and “bottom”, you don’t have to specify an exact amount of pixels. Infact, you could give every hyperlink the rollover class, because if the image has the same height of the “sprite”, the image will not move.
May 9th, 2010 at 6:36 pm
Thank you! You have no idea how big of a help this is – it’s just so simple! This is by far the easiest solution I’ve seen, I’m definitely doing rollovers like this from now on. :D