Advanced Search

Mootools rollOver (no effect)

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

Expand | Embed | Plain Text

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.