Cute CSS-based Rollover Trick

Typical rollover uses multiple images, one for each state.  Petr Stanicek shows how CSS2's background-position attribute can be used to do rollover with just one image containing subimages for multiple states.  Cute.  Via Paschal L.

For the impatient, here is the meat:

#menu a { …
    background: url("button.gif") top left no-repeat;
… }
#menu a:hover { …
    background-position: 0 -39px;
… }
#menu a:active { …
    background-position: 0 -78px;
… }