Mootools rollOver (no effect)


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



Copy this code and paste it in your HTML
  1. window.addEvent('domready', function() {
  2. //preload images
  3. var aPreLoad = new Array();
  4. var aPreLoadi = 0;
  5.  
  6. //do rollover
  7. $$('img.roll', 'input.roll').each(function(el){
  8. //let's preload
  9. aPreLoad[aPreLoadi] = new Image();
  10. aPreLoad[aPreLoadi].src = el.src.replace(el.src.replace('_off_', '_on_'));
  11. aPreLoadi++;
  12.  
  13. el.addEvent('mouseover',function(){
  14. this.setAttribute('src',this.src.replace('_off_', '_on_'));
  15. });
  16.  
  17. el.addEvent('mouseout',function(){
  18. this.setAttribute('src',this.src.replace('_on_','_off_'));
  19. });
  20. });
  21.  
  22. });
  23.  
  24.  
  25. window.addEvent('domready',function() {
  26. $each($$('.fade'), function(el) {
  27. var original = el.getStyle('color');
  28. var morph = new Fx.Morph(el,{ 'duration':'300' });
  29. el.addEvents({
  30. 'mouseenter' : function() { morph.start({ 'color':'#ff8c00' }) },
  31. 'mouseleave' : function() { morph.start({ 'color': original }) }
  32. });
  33. });
  34. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.