<div id="button_gets_rollover_image_in_background">
  <a href="#">
    <img class="rollover" src="..." />
  </a>
</div>





  doRollovers = function(elements) {
    elements.each(function(thisel){
      var src = thisel.getProperty('src');
      src = src.replace('_ro','');
      var extension = src.substring(src.lastIndexOf('.'),src.length);
      thisel.getParent().getParent().setStyle('background','url('+src.replace(extension,'_ro' + extension)+') no-repeat');
      thisel.addEvent('mouseenter', function() { this.fade(0.01); });
      thisel.addEvent('mouseleave', function() {
        this.fade(1);
      });
    });
  };
  doRollovers($$('.rollover'));

Mootools rollOver

JavaScript