Topic: Background image shifting as a rollover

Well, going through some old favorites, I checked out http://www.abcnews.com/ and noticed that they had done a redesign. I went noodling around in the source, and saw an interesting method of doing rollovers via CSS. For their main navigation at the top, as well as the tabbed boxes on the lower right side, they create the rollover effect by shifting the background image (such as http://abcnews.go.com/images/site/btn_header_nav.gif ).

I realize that by doing this, they alleviate the problem of having to preload the rollover images. They also perform the rollover without javascript (another plus). But I'm curious as to any other benefits of this method. I thought it quite intelligent, actually. Reminds me of the old WinAmp skinning images.



(Edited by Pugzly on 10-20-2004 05:23)

Thank to Petr Stanícek aka -pixy- and the many CSS advocates, CSS rollovers are in the hoods since many months now ( july 2003, and certainly before ). To my knowledge, Dan Rubin is the first to have publicly used and explained the navigation matrix method.



(Edited by poi on 10-20-2004 11:20)

Very cool. Thanks for the links!