Automated Mouseover Images using YUI

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.