MooEasyRollover – The easiest rollover image plugin for Mootools !

10 juin 2009

What is MooEasyRollover ?

MooEasyRollover is a plugin for Mootools that allows you to make a simple rollover image without writing any code line !
The plugin is able to detect all images tagged with a specific class in order to add a rollover image behavior with an image caching.

Live Demo

Check out the MooEasyRollover live demo to see it in action !

Why this Mootools plugin ?

I was working on an old website that use the Macromedia function mm_swapimage, when I added some Mootools stuff, I thought it can be cool to be able to do the same work than mm_swapimage with a Mootools class

Installation instructions

• Download the MooEasyRollover archive.
• Then, add mootools to your page, note that the plugin requires the Assets class of the more builder.
• Add the MooEasyRollover class to your page :

<script src="/js/mooeasyrollover/mootools-1.2.2-core.js" type="text/javascript"></script>
<script src="/js/mooeasyrollover/mootools-1.2.2.2-more.js" type="text/javascript"></script>
<script src="/js/mooeasyrollover/mooeasyrollover.js" type="text/javascript"></script>

• Use this code to launch the plugin. Make sure to set options with the correct values according to your server.

window.addEvent('domready', function() {
 
        //MooEasyRollover launcher
	var MooEasyRolloverInstance = new MooEasyRollover({
		MooEasyRolloverClass : 'rollover', //Set the class which tags all buttons to rollover
		fullPath : 'http://www.domain.com/buttons/', //Set the full path to your images folder
		prefix: '-on' //Set the prefix of mouseover images
	});	
 
});

MooEasyRolloverClass is the classname used to identify images to rollover.

Fullpath is the path to the images folder to use.

Prefix is used to identify rollover images, for exemple, in order to rollover button.png you have to create a button-on.png image in the fullPath folder.

Download

Click here to download MooEasyRollover.