ROLLOVERS = {};
ROLLOVERS.rollover = {
    init: function() {
        this.preload();
         
        $(".ro").hover(
            function() { $(this).attr( 'src', ROLLOVERS.rollover.new_image($(this).attr('src')) ); },
            function() { $(this).attr( 'src', ROLLOVERS.rollover.old_image($(this).attr('src')) ); }
        );
    },

    preload: function() {
        $(window).bind('load', function() {
            $('.ro').each( function(key, elm) { $('<img>').attr( 'src', ROLLOVERS.rollover.new_image( $(this).attr('src') ) ); });
        });
    },
   
    new_image: function(src) {
        return src.replace(/_off\.(gif|jpg|png)$/, '_on.$1');
    },

    old_image: function(src) {
        return src.replace(/_on\.(gif|jpg|png)$/, '_off.$1');
    }
};