Automated Mouseover Images using YUI

Sunday, July 13th, 2008
Setup image mouseovers quickly and easily just add a css class. The script preloads the images and will also verify that the over state image is available so broken images aren’t displayed.

When building sites often image mouseovers or rollovers are needed, while there are many ways to go about adding in this functionality all of them required more steps than ideal. At the very least you’d have to specify the over state image to use and attach some some javascript to the mouseover and mouseout events. To streamline this process I created this mouseover script, an example of it in action is to the right.

To enable the mouseover just include the required javascript files and then for any image that should have the mouseover apply the css class of “jp-mouseover”. For the over state image it will look for the image name with “_ov” appended just before the the file extension. For the example to the right the two images are named “mouse-over-me.png” and “mouse-over-me_ov.png”.

Details, examples, downloads, and configuration options are here.

Read other entries about Javascript
Written by James Punteney
blog comments powered by Disqus