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

By: Erik

Erik — Wed, 21 Dec 2011 01:03:34 +0000

Justin, I would assume that you need to remove the “no-repeat 0 0″ from your “background-image” line. Leave only the “url(../image)” in this line. My guess is that this is no longer ‘proper’ as the image defaults to a position of 0,0.

By: Justin M. Kolenc

Justin M. Kolenc — Fri, 18 Nov 2011 10:45:33 +0000

Aloha!

This tutorial was/is awesome! It has almost certainly spared me from the pain of trying to adapt my client’s pre-existing java script (I suck at java) to our new project. My only problem is that when I add the code to hide the alt text, it makes the whole image go away. What am I doing wrong? Everything is fine until I add the following:

overflow: hidden;
text-indent: -10000px;
font-size: 0px;
line-height: 0px;

As soon as I add all that, the alt text vanishes…but so does my background image, and therefore my link. When I take these four lines back out, the rollover returns as if nothing were ever wrong, but so does the “alt” text.

(And BTW, not to be picky, but this really isn’t “alt” text, is it? It’s the actual link text, but because it’s not desired in lieu of the image-based rollover we’ve crafted, we’re just treating it as thought it’s alt text…right?)

The site is not live yet, so I cannot provide a URL. Sorry!

By: Matt

Matt — Fri, 02 Sep 2011 13:42:35 +0000

Got a link, Ben?

By: Ben

Ben — Fri, 02 Sep 2011 12:38:57 +0000

I like the simplicity of this. I implemented this method in place of a rollover technique that involved and image in a div with a simultaneous background image and used visibility controls to cause the rollover effect (not great in FF).

I am using 245x510px images for my rollover and I am having trouble with the links working on one click. Any thoughts?

(tested in FF6.0.1 and IE 9.0… x64)

By: Ron

Ron — Tue, 14 Jun 2011 11:50:03 +0000

This is briliiant! Totally got rid of my flicker problem. Outside of the box thinking like this is really refreshing. Every website likes rehash the same old approaches, but you bring someone new to the table every time. Great stuff.
~Ron

By: Anthony

Anthony — Tue, 15 Feb 2011 19:33:00 +0000

Sorry! Problem solved! Thanks.

By: Anthony

Anthony — Tue, 15 Feb 2011 17:05:22 +0000

Question?

It looks and works great. Example here at http://www.partnersforcharity.com/index-new.php

However, it appears broken on my DroidX by Android, and yet your demo does not. It shows the entire image (with all states) vertically smashed. Any clue as to what I’m doing wrong?

By: Luke Richardson

Luke Richardson — Wed, 02 Feb 2011 15:24:22 +0000

Will this work in wordpress?

So do I make one jpeg image with 5 circles but in different colours,,,, to do the above demo?

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.