CSS image rollovers
I’ve just completed working on a website for a large financial services firm, I was engaged to work up some standards based HTML site templates for the CMS system along with the CSS and styleguide conformance.
During my initial design phase I showed the client some test pages which used a variation of the Malarkey image replacement technique in the header and menu areas. To my surprise the client asked that I stick to actual images throughout the site as they thought that the problem of neither the image or the text being displayed in some circumstances was not worth it.
I was mildly pissed-off that I would have to use javascript to do the rollovers, then riding home from the meeting in the cab it dawned on me that of-course I could just use pretty much any of the other image replacement techniques to do an image rollover too.
There is nothing new here and I’m sure there are examples of this elsewhere, but it hadn’t occurred to me to use these CSS tequniques in this context before. duh..
CSS image rollovers with active state
This is just one of many ways to achieve the same effect, but the one I liked the most from my subsequent tests.
