Kalkran.COM

Since this seems such a "hot" topic these days, I figured I might as well spend a couple of minutes and write a quick tutorial on what they are and how to make them work.

The finished result will look like this Arrow

For this mini-tutorial I'll be using an image that looks like this:

When we're not hovering over the link, we want the top image to be displayed. And if we are hovering, show the bottom image. They are both 16px high. Together forming an image of 32 pixels high and 16 pixels wide.

 
a.sprite {
background-image: url('arrow-tut.gif');
background-repeat: no-repeat;
background-position: 0 -1px;
 
display: block;
 
width: 16px;
height: 16px;
 
padding-left: 16px;
margin: 0px;
}
a.sprite:hover {
background-position: 0px -17px;
}

That's the actual CSS code I'm using. Display:Block so I can set a defined height (alternatively, use line-height: 16px;)

What the :hover tag does, is shift the background out of position, so the lower 16 pixels of the image are shown, rather than the top 16 pixels.

You can actually integrate the .sprite class to be more general, allowing you to use different kinds of pictures.

All you have to do is leave the background-image: url(); out of the stylesheet and define it inline:

 
<a class="sprite" style="background-image:url('arrow-tut.gif');" href="http://kalkran.com/">Arrow</a>

You could also use bigger images, with more little pictures on it, and shift it to the correct image for each different state.