11/08/03
6Image-based rollovers with CSS
Dave Shea recently mentioned some alternatives to Doug Bowmans Image Replacement Trick. Having tried one of these methods, I realised that it would really suit rollovers without the need for javascript. Whereas previously I’d only thought it was possible by A List Apart’s method, this way doesn’t limit you to using only using bitmap fonts. Its purely image based. Apparently, Dave already uses this for the rollovers on Mezzoblue (so I’m not claiming any originality here!)
So to test this out, I’ve added a rollover & homepage link on this sites logo, and an article on how to do image rollovers with CSS. As with all my ‘articles’, please let me know if you have anything add, dispute or change. I don’t pretend to be a CSS expert, but hopefully someone will find it useful.
Tags: 
Previous
Download our vCard
Jeff Croft said 1855 days ago:
Great article!While the cons are noteworthty, I don't think they should stop anyone from using this method.
Con #1: The percentage of folks who have CSS on and images off is VERY small. It's got to be damn near zero. These people are probably used to getting confused layouts, since many CSS designers rely on images, as well.
Con #2: The Tantek hack isn't much of a problem, IMHO. Worth noting, but not really a "problem," per se.
Con #3: This is obviously a bug in Safari, and one I would imagine David Hyat will get around to fixing soon (he's usually pretty quick about these things). I wouldn't hesitate to use this method because of the Safari nug -- Safari users are still a pretty small percentage, and I think we can count on it being fixed in short order.
Jon Hicks said 1855 days ago:
Yeah, I guess I'm trying to be too 'balanced' about the whole thing. Basically it works in every 'modern browser' I've tested it in!You're right, the cons aren't really huge problems - especially the Safari bug. Even before the bug is fixed, there are ways around it, but its worth warning folks that it can happen.
Alex said 1853 days ago:
Posted just in the nick of time. I was wondering how Dave accomplished those rollovers.As always, the "images off, CSS on" scenario ruins an otherwise seamless solution...
Jon Hicks said 1852 days ago:
I read somewhere recently an article on how to avoid that problem. If anyone sees it, please let me know! There's been so much about Fahrner Image Replacement recently that its all a bit of blur.Alex said 1848 days ago:
Just found, via accessify:Accessible Image Replacement
Unfortunately, it resorts to extraneous markup to solve the problem. What do you think?
Jon Hicks said 1841 days ago:
Alex,Thanks a lot for finding this. I wouldn't be concerned about the extra markup if it was a fairly foolproof solution. Unfortunately, it doesn't work in IE 5 Mac which is odd. If that could be cured, I'd be all for it!