DOM and JavaScript image rollover

It’s a simple script — about nine lines of JavaScript total. Just add the imageSwapIn and imageSwapOut functions to onmouseover and onmouseout event handlers in the containing element for your image (usually a link).

The first function takes two parameters: the image id — which you set using the id value, or by using the this.id keyword and the path to the replacement image.

The second function only requires the image id (i.e. imageSwapOut(”image_id”) or imageSwapOut(this.id)).

On a mouse-over, the script moves the image source from the src attribute to the title attribute and changes the value of src to the path of the replacement image.

When the mouse is moved off/out of the containing element, the script moves the title — the original value of src — back to src. Then it removes the title node.

I tested it (and it works just fine) in Safari 2.0, Opera 9 (Mac and Windows), Firefox 1.5, Firefox 2, Internet Explorer 6 and Internet Explorer 7.

It may not work in Internet Explorer 5.x, but then if you’re using IE 5, it’s about time you upgraded your browser or purchased a new computer. I also can’t vouch for whether it works in older versions of Safari, Opera or Firefox.