MooTools Image MouseOvers

Creating mouseover code can be a real mess but using MooTools I put together a solution that saves me time and keeps my code super clean. There are some practices that I use with my theory. All "mouseover" versions of the image end in "-mo". For example, sugar.jpg is the standard image while sugar-mo.jpg is the mouseover version. Also, I use a CSS class mo to identify which items have mouseovers. I also stick to one file extension and assume that the mouseover image's file extension is the same as the original file's extension.

Code:

                     window.addEvent('domready', function() {

$$('img.mo').each(function(img) {
  var src = img.getProperty('src');
  var extension = src.substring(src.lastIndexOf('.'),src.length)
  img.addEvent('mouseenter', function() { img.setProperty('src',src.replace(extension,'-mo' + extension)); });
  img.addEvent('mouseleave', function() { img.setProperty('src',src); });
}); 

});

The Usage:

<a href="/"><img src="/graphics/sugar.jpg" alt="Sugar" class="mo" height="50" width="150" /></a>

That's it. Simply add the mo CSS class to the image and save yourself any ugly, bloated "onmouseover" code. Remember not to use the mo CSS class anywhere else!