Comments on: CSS Image Rollovers: Accessible, Standard Compliant, Flicker-Free

By: Jason

Jason — Tue, 23 Feb 2010 05:28:18 +0000

Hey just wanted to throw out a big Thank You! I’ve tried many different approaches to hover buttons over the years and have decided I like this solution the best.

Thanks again for this innovative approach!

By: JohnMiller

JohnMiller — Thu, 28 Jan 2010 03:53:47 +0000

Jennifer, if you want a text rollover, surely you could simply use the :hover pseudo-class?

By: Jennifer

Jennifer — Tue, 12 Jan 2010 20:57:56 +0000

Hello. Your article was very helpful. I’m fairly new to HTML and CSS. Your suggestion of using the single CSS rollover makes sense, although I have text that I want to stand as text. How can I make this single rollover work and still be able to use text? I’m not sure if this was touched upon in this article or not.

Thanks this would really help with a site I’m coding.

By: Cesar Castro

Cesar Castro — Thu, 16 Jul 2009 21:09:05 +0000

Wow, it’s a really simple solution, each day I’m even more impressed about what xhtml and css can do without javascript’s help (since I try to avoid flash for SEO, javascript has been my company for a long time).

Great article, i’ll have no option but bookmark it.

By: Tom Bathgate

Tom Bathgate — Sat, 06 Jun 2009 15:39:30 +0000

Hey Matt,

thanks for the reply, i’ve looked at the demo in FF3, using web developer tool bar to turn off images and there is no text displaying, if you turn off images off in IE7 there is still no text displaying. The link is still there but you can’t see it. I did find this tutorial: http://ryanroberts.co.uk/_dev/experiments/accessible-rollovers/index.html and am trying to figure it out.

By: Matt

Matt — Sat, 06 Jun 2009 15:25:57 +0000

Tom, glad you’ve found this article useful.

Even when you turn off images in a web browser, the background images will still load since they are being called through the external CSS stylesheet. If someone turns off the stylesheet, then the menu text links will show, so this should work just fine no matter what the user decides to do.

By: Tom Bathgate

Tom Bathgate — Sat, 06 Jun 2009 15:20:34 +0000

This is a great article and its been a great help for me designing a new menu. I do have one issue though. When you turn off css the menu displays fine, without any problems. When you turn off images, you are presented with no navigation. As yet I haven’t been able to find a solution to this. But thanks for the great start.

By: Jan

Jan — Sat, 28 Mar 2009 22:08:48 +0000

Thanks for putting this together, straight-forward, plus the accessibility aspect saved me some additional research time!

By: CSS Image Rollovers: Accessible, Standard Compliant, Flicker-Free … | CSS Tutorials - CSSHelper.net

Fri, 20 Mar 2009 07:46:17 +0000

[...] Source [...]

By: Matt

Matt — Fri, 27 Feb 2009 22:28:20 +0000

Thanks John! Yes, we think it’s the better alternative, too. The least amount of markup and the most accessible.

By: JohnMiller

JohnMiller — Fri, 27 Feb 2009 22:04:51 +0000

This is just so smart! A brilliantly cunning technique – quite the most inventive I’ve come across in ten years of using image rollovers! Wins hands-down over the CSS Sprites list technique.

By: Matt

Matt — Wed, 25 Feb 2009 06:05:15 +0000

David, great question. Just like anything else with SEO, as long as you’re not abusing the tactic, you’re going to be okay. Also, don’t keyword stuff on your image replacements. Make sure that the text is relevant to the image.

By: David

David — Wed, 25 Feb 2009 03:16:01 +0000

What are the SEO implications of using this method with text being out of view?

By: WordPress Plugin: Twitter ReTweet | CHROMATIC

WordPress Plugin: Twitter ReTweet | CHROMATIC — Tue, 10 Feb 2009 22:40:18 +0000

[...] you’d like to style the link (perhaps you want to use a CSS image rollover instead of a plain Jane link), the CSS class is [...]

By: Wharton

Wharton — Mon, 09 Feb 2009 23:26:52 +0000

Yeah I thought so..
Still, I like this combined image method myself, great article. It annoys me too to see all those sites with ‘lagging’ rollovers ‘in the 21st century’ .