hover effect (rollover) by changing background position?

[Mygly]

I have been trying to figure out how the folks over at dig (add another g) have done their hover effects. I have stumbled upon an image that they are using that has 3 pieces to it in a way. (the image: go to their site and then add this at the end "/img/tab-back.png") It seems they are changing the background position and thus creating a hover effect in this way. This makes it easier to use hover effects with somelike like a gradient it seems. Now i'm not sure if I can legally post the css here or not, so i've decided not to, however, if you have firefox and the developer toolbar you can find it, it's mostly under

#sub-nav li a, #sub-nav li a:visited, #sub-nav li span, .extra-nav li a, .extra-nav li a:visited, .extra-nav li span    (line 1039)

and

#sub-nav li:hover a, .extra-nav li:hover a    (line 1072)

Thanks for any help anyone can give, i'd really like to learn how to do this.

[Nadia P]

one example, I'm sure there are more out there: http://www.alistapart.com/articles/slidingdoors/

Nadia

[DeafNLoud]

I believe you are talking about CSS sprites. Where you use one image that has various states of hover as the background and then position the background image to show the appropriate state of the hover etc.

You can find more information about it at

http://www.alistapart.com/articles/sprites