Now That’s a Sprite Image!

Working the other day we came across an awesome image configuration for your sprite file that has up, down, left and right arrows. Check it out:

This one tiny little image:    Yeilds: 

In Action:

The HTML:

[[div class="down arrow"]][[/div]]
[[div class="up arrow"]][[/div]]
[[div class="left arrow"]][[/div]]
[[div class="right arrow"]][[/div]]

The CSS:

.arrow{
   background:url(/images/sprites.jpg) no-repeat;
   float:left;
   margin:5px;
}
.arrow.up, .arrow.down{
   height:9px;
   width:18px;
}
.arrow.left, .arrow.right{
   height:18px;
   width:9px;
}
.arrow.down, .arrow.left{
   background-position:0 0;
}
.arrow.up{
   background-position:0 -8px;
}
.arrow.right{
   background-position:-9px 0;
}