Hover = Class.create(
    {
        
        initialize : function(image) {
            this.image = image;
            
            Event.observe(
                this.image,
                'mouseover',
                this.hover.bind(this)
            );
            
            Event.observe(
                this.image,
                'mouseout',
                this.restore.bind(this)
            );
            
            var matches = this.image.src.match(Hover.REGEX_FILENAME);
            this.baseName = matches[1];
            this.extension = matches[2];
            
        },
        
        hover : function() {
            this.image.src = this.baseName + '_on' + this.extension;
        },
        
        restore : function() {
            this.image.src = this.baseName + this.extension;
        }
    }
);

Hover.REGEX_FILENAME = /(.+)(\..+)$/;

Event.observe(
    window,
    'load',
    function() {
        [$$('img.hover'), $$('input.hover')].flatten().each(
            function(image) {
                new Hover(image);
            }
        );                
    }
);