PHP Developer / Blog

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.

1. A single sprite graphic (we’ll use one similar to the tabs above)
2. 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.

<a href="#" class="sprite">Rock On</a>
<a href="#" class="sprite">So Easy</a>

Here’s an example of what that looks like.

That WasWay Too Easy, No?

That’s the basic idea. You can add any additional CSS needed to incorporate it into your site.

As always…comments welcome.

This entry was posted on Thursday, April 3rd, 2008 at 5:24 pm. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.