Unobtrusive Image Rollovers
28 Mar 2005
Version 1.0
Download: rollovers.js
Download: rollovers.js
The Rollovers class presented here is an example of "unobtrusive Javascript" (see Google) for creating image roll-overs.
Traditional image roll-over code requires the developer to place hard-coded onmouseover and onmouseout events for each target img. Often the original image URL is duplicated in the src and onmouseout attributes.
The Rollovers class has a constructor that takes a list of [id, new image source] pairs:
rollovers = new Rollovers([ ["dad", "dad-s.jpg"], ["fry", "fry2.jpg"] ]);
and an Install() method to be called after the page has been loaded:
<body onload="rollovers.Install();">
Install() will find all specified images by ID and automatically set up the mouse event handlers, allowing for cleaner HTML.
<!-- These images will have event handlers added automatically --> <img id="dad" src="dad.jpg"> ... <img id="fry" src="fry.gif">
Examples
- Image Rollover Demo shows how to create and install a
Rollovers()object.
References
- For an even simpler method, check out Jehiah Czebotar's SimpleSwap.
Contact Information
- Email:
