Unobtrusive JavaScript for Setting Up Rollovers

/**
 * creates rollovers on items with the class rollover
 * requires mootools 1.24 (core)
 * -the id of the class should be the image base name
 * -the text in the link should be the alt text for the image
 *
 * variables:
 * prefix - any prefix (path, button prefixes, etc.) that are before the id for the iamge
 * filetype - include preceding .)
 * onText - text for on state
 * offText - text for off state
 *
 * example:
 * prefix = "images/buttons-";
 * fileType = ".gif";
 * onText = "-on";
 * offText = "-off";
 *
 * The id of the <a> surrounding the image will be used as the main name part of the image
 * The text inside the <a> tag will be used as alt text
 *
 */
"use strict";
function createRollovers() {
    var prefix = "images/btn-",
        fileType = ".gif",
        onText = "-over",
        offText = "";

    $(document.body).getElements( 'a.rollover' ).each( function( el ) {
        var altText = el.innerHTML,
            imgName = el.id,
            offImg = prefix + imgName + offText + fileType,
            onImg = prefix + imgName + onText + fileType;

        el.innerHTML = "<img src='" + offImg + "' alt='" + altText + "' />";
        
        el.addEvents({
            'mouseenter' : function () {
                $(imgName).getElement('img').src = onImg;
            },
            'mouseout' : function () {
                $(imgName).getElement('img').src = offImg;
            }
        });
    });

    return;
}

window.addEvent('domready', function () {
    createRollovers();
});