CSS image rollovers

When doing some design work recently, I found myself wanting to include an image rollover. So I did what I used to do before I started focussing on web standards and css - I inserted a rollover using Dreamweaver. Then I looked at the source code and I thought "oh my god. That looks ugly." Dreamweaver had inserted a huge amount of javascript (see source code of this page) and the link code changed from this:

<a href="whatever.htm"><img src="rollwithit_js.gif" width="311" height="113" /></a>
to this:
<a href="whatever.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','rollwithit_js_2.gif',1)"><img name="Image1" border="0" src="rollwithit_js.gif" width="311" height="113" /></a>

Yuk.

Now, I'm sure there is probably a neater way to do this with JS, but my first thought was about an article I had noticed on ALA about CSS rollovers. So I did a search and dug out the article. It only works for very simple rollovers, but that was all I needed. And with a bit of imagination you can get some pretty nice effects.

Except there was a problem. It worked very nicely in Internet Explorer, but not very nicely in Firefox. Now I know most people still browse with IE, but I browse with Firefox, so if nothing else I want my sites to work for me!

Screenshot of initial image:

Screenshot of IE rollover state:

Screenshot of Firefox rollover state:


So I asked around and Lee Hosty provided the CSS code needed to turn this into a cross browser solution. Lee pointed out that applying the hover style to the image would work nicely. Except that Internet Explorer doesn't support hover very well on much other than links. So Lee wrote some CSS which would work around the various issues.
Lee makes use of the Internet Explorer "Star html selector bug" to apply styles in Internet Explorer only. So he applies the hover to the image for most browsers and then uses the bug to apply the original ALA solution for Internet Explorer only.

<style type="text/css">

img {
border: 0;
}

a.roll img {
background-color: #EEEEEE;
}

a.roll img:hover {
background-color: #CCCCCC;
}

* html a.roll {
background-color: #EEEEEE;
}

* html a.roll img {
background-color: transparent;
}

* html a.roll:hover {
background-color: #CCCCCC;
}

</style>


Which means my link code can now look like this:

<a href="whatever.htm" class="roll"><img src="rollwithit_js.gif" class="roll" width="311" height="113" /></a>


Original ALA solution example
Lee's solution example

I love it.

Many thanks to Lee Hosty for this lovely solution.
Thanks also to the Open mailing list which has allowed people like Lee Hosty and Jon Hanna to provide me with help!