Advanced Search

Mootools rollOver

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <div id="button_gets_rollover_image_in_background">
  2.   <a href="#">
  3.     <img class="rollover" src="..." />
  4.   </a>
  5. </div>
  6.  
  7.  
  8.  
  9.  
  10.  
  11.   doRollovers = function(elements) {
  12.     elements.each(function(thisel){
  13.       var src = thisel.getProperty('src');
  14.       src = src.replace('_ro','');
  15.       var extension = src.substring(src.lastIndexOf('.'),src.length);
  16.       thisel.getParent().getParent().setStyle('background','url('+src.replace(extension,'_ro' + extension)+') no-repeat');
  17.       thisel.addEvent('mouseenter', function() { this.fade(0.01); });
  18.       thisel.addEvent('mouseleave', function() {
  19.         this.fade(1);
  20.       });
  21.     });
  22.   };
  23.   doRollovers($$('.rollover'));

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.