Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

Better image rollovers

When browsing through other site’s source code, some of the ugliest HTML occurs when the site uses one of the most basic javascript effects: The image rollover. There are a myriad of these scripts available for free on the web, but as far as I can tell every single one of them requires event handling code to be added to the markup of the page.

In these days of standards, the DOM and separating structure from presentation this is no longer good enough. Image rollovers are a presentational nicety—they add nothing to the underlying meaning of the document and as such I see no reason to pollute my markup with code to support them. I’m always on the lookout for fun new ways to use the DOM (see blockquote citations) so I took it upon myself to improve the situation. The first iteration of my improved rollover script, rollovers.js, is demonstrated here.

The approach I have taken is to give any images that are to have a rollover a CSS defined background image and a class attribute of “rollover”. The rollovers.js script then finds all images with that class name and adds onmouseover and onmouseout events to them (using Scott Andrew’s addEvent function to avoid cross browser incompatibilities). When an image is rolled over, the image is replaced with a preloaded transparent gif allowing the background image to show through. The gif is switched back to the default image when the mouse moves away.

The script works fine in Mozilla 1.2, Phoenix 0.5 and IE6. It fails in Opera 7, thanks I think to problems dynamically adding new events in that browser. I would love to hear if it works in other browsers, especially Mac browsers such as IE 5 and Safari. Any suggestions on further improvements to the script would also be very welcome.

Posted 19th January 2003 at 11:46 am

This is Better image rollovers by Simon Willison, posted on 19th January 2003.

View blog reactions

Next: Alternative rollover script

Previous: The Eric Eldred act

13 comments

  1. I felt the same way about all the mouseover scripts so made my own a few months ago, feel free to check it over at http://www.bleedingego.co.uk/code/js/rollover/ incase theres anything of use to you in it.

    Daniel Nolan - 19th January 2003 13:00 - #

  2. That's a really nice script - I hadn't thought of using the image name with a standard suffix as the rollover image. The function prototype stuff for adding events is neat too (I didn't realise you could do that).

    Simon Willison - 19th January 2003 13:06 - #

  3. Hit me if I am wrong here, but why not just use CSS? a{ background-image:url(roll.gif); } a:hover{ background-image:url(over.gif); } OK, you would have to write a unique rule for every image-rollover, but I can't imagine a site which has hundreds of these things.

    Martijn - 19th January 2003 14:46 - #

  4. Good question. The main problem I had when I tried using CSS for rollover effects in that way is that the alternative background images aren't preloaded, so when you mouse over the link there will be a slight delay before the alternative image appears. It also only works for links (at least in IE, other elements do not support the :hover attribute). It also means that no image is embedded in the HTML at all, which may or may not be preferable depending on whether or not the initial image can be considered part of the content or merely a presentational addition.

    Simon Willison - 19th January 2003 14:53 - #

  5. I personally tried a simple CSS method to begin with, but found it caused all kinds of strange effects. In one browser, IE4 or 5, I cant recall, the buttons I had actually moved down the page on a mouseover effect which wasnt exactly helpful.

    Daniel Nolan - 19th January 2003 14:59 - #

  6. You could add an image with visibility:hidden and position:absolute with the same source as the hover-image. But it would be nice if the browsers preloaded the hover-images after they've downloaded everything else.

    Martijn - 19th January 2003 15:46 - #

  7. One of the methods I tried for preloading images was using the DOM to detect the background-image images and preload them. This is actually a lot harder than I expected, as the calculuated styles (i.e the ones set in the stylesheet) for an element are not directly available through the DOM. The style object for an element only gives you access to properties defined in inline styles specified in a style="" attribute. There are DOM methods for accessing stylesheets, but they looked pretty unpleasant. I suppose it could be possible to use them to cycle through a stylesheet extracting any background-image: rules and preloading the relecant images, but it would be pretty tough to code.

    Simon Willison - 19th January 2003 16:10 - #

  8. Sorry to dissapoint you; MSIE5.2/MacOSX does not do a thing to change the images.

    Kris - 19th January 2003 19:20 - #

  9. I tried it with Safari and I am sorry to say that it did not work.

    Graham Barr - 27th January 2003 12:32 - #

  10. The reason why it doesn't work in Opera is that you are trying to attach an event listener to the window object. Opera is implementing the new DOM event handling somewhat more to the letter than IE and Mozilla. The old JS event model where some events were targeted to the window isn't really compatible with the DOM event model where the window doesn't participate at all. I have tried to re-write the script to use the onload event of the document, and it still didn't seem to work - this may be a genuine bug in Opera while the former behaviour is by design (or at least by a conscious act of omission ;)

    Hallvord R. M. Steen - 10th July 2003 07:44 - #

  11. Just to second the comment: does not work in IE 5.2 for the Macintosh. I am on Jaguar OS X 10.2.8. If you come up with a cross-platform solution, I'd love to hear from you!

    SAndy - 9th December 2003 08:43 - #

  12. Nor does it work with Firefox. I can't seem to find any mouseover code that works with firefox. If somebody finds one, then please let me know.

    Brian Ritchie - 8th February 2005 20:02 - #

  13. sdfd

    we - 20th July 2006 11:04 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/01/19/betterImageRollovers

A django site