Comments on: Extremely efficient image rollovers using CSS sprites and NO Javascript

By: Bronte

Bronte — Mon, 10 May 2010 02:36:48 +0000

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

By: vcmirko

vcmirko — Fri, 11 Sep 2009 20:28:17 +0000

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.

By: marie

marie — Tue, 01 Sep 2009 22:41:15 +0000

hmmm… Why do you need “# padding-top:20px; ” when you have background position as 0?

By: jaisen

jaisen — Tue, 01 Sep 2009 08:31:10 +0000

@Art, I’m not sure if I understand your question. It scales like any other image based rollover would.

By: Art

Art — Mon, 31 Aug 2009 21:08:45 +0000

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?

By: craig

craig — Thu, 06 Aug 2009 04:41:21 +0000

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.

By: Ben

Ben — Thu, 21 May 2009 09:17:56 +0000

@billiy

“You cant just go declairing shenanignas on innocet people. Thats how wars get started” ;-)

By: jaisen

jaisen — Thu, 21 May 2009 03:44:47 +0000

@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.

By: jaisen

jaisen — Thu, 21 May 2009 03:43:30 +0000

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

By: billy

billy — Thu, 21 May 2009 03:38:44 +0000

I call shenanignas! Looking at your source code I see javascript for your example rollovers. Cheater!