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