Simple Rollovers with Prototype is a simple script that will create an image rollover effect.
The simple way to set it up is give an img element the class ‘rollover rollover effect.
The simple way to set it up is give an img element the class ‘rollover’ and make sure the rollover image has the same path and file name as the source image of the img element plus a suffix of ‘-rollover’.
For example if your image is tree.jpg make sure your rollover image is tree-rollover.jpg. If FastInit is present it’ll use that to start it automatically, otherwise it’ll add a window.onload event.
You can call Rollovers at any time before the page loads with your own custom options:
- selector : An array of CSS selectors
- srcFunction : a function that is called with two arguments, the current image and the options array. This function should return a string representing the URL of the rollover image to replace the default one.
You can add as many other options as you need to this array; because it is passed to the srcFunction you can use them within the function.
When Rollovers is called it will apply a mouseover event listener to the images selected by the CSS selectors and preload the images.
Download from: Homepage