Meaghan's blog

Hello, World.

That seems appropriate as an opener for my first post on Labs. Usually I find myself on the less-technical, more client-management focused side of things here at EchoDitto, but I was encouraged to join the discussion here, so here I am!

So I was tasked yesterday with adding a graphic button to a client’s site and they wanted the image to change when you mouse over it. A rollover image. Simple enough. Except that I didn’t want to use Javascript. It would have been possible, sure, but I would have had to snag one of my friends on the tech team and it would have been a hassle. So I wanted to see if I could make it work without Javascript.

Luckily, the rollover image the client wanted to use simply involved changing the color of a particular part of the original image. In a flash of resourcefulness, I thought: CSS can do that! Five minutes later, I had what appeared to be a working rollover image.

First, I edited the original image so that the part that needed to change colors was transparent. Then, placed the image in my blog post on a white background. Finally, created a CSS class such that the background changes color on hover.

Voila! Instant fake rollover image.

Maybe it’ll help you next time you can’t, or don’t want to, bother with Javascript.