Double Image Rollover using Pure CSS

Look Ma - No Javascript!

The code on this page was inspired by Eric Meyer's Pure CSS Popups 2 demonstration. Eric hid his popups using height:0 width:0, but noted that this method does not work in IE5x because it is unable to handle dynamically resizing images. However, when I tried using visibility:hidden (and visibility:visible on a:hover), IE5x began to co-operate.

Making the button rollover as well was relatively straightforward in Moz and Opera 7. IE6 is somewhat fussy about which rules it will accept - styling a:link did not work, and any background-x styles on a:hover will stop the popup.

In retrospect, I realise that it would have been a lot easier to use buttons with a pattern that could expand and contract according to the text size, as Al Sparber has done on his CSS Rollover Tutorial. Using a fixed height / width image for a button is much more complicated.

There is a serious conflict between the requirements of the Mac and Win versions of IE5. If IE5 Win sees any height or width on the a or a:hover it gets confused and won't popup the second image. The only thing I could make work was a combination of line-height and display:block.

Unfortunately IE5 Mac behaves rather strangely with these rules, so I ended up using padding and margins for the buttons on that browser, then re-setting the values to 0 for all the others to benefit IE5 Win. Read the comments in the source of this page for more detail of the hackery involved.

I've tested in: IE5 Win, IE 5.5 Win, IE6 Win, IE5 Mac, NN 6.2, Moz 1.1, and Opera 7.

It's reported to work in Safari, Camino, OmniWeb 4.5 beta, and Firebird.

Things to Note:

Any comments or suggested improvements? Email me: