Advanced Search

jQuery RollOver plugin

/ Published in: jQuery
Save to your folder(s)
What it does is look for img tag and on rollover change the source path from "anyimage.jpg" to "anyimage_hover.jpg". It add the suffix "_hover" at the end of the src name without changing the extension. If you look at the code you will see that it also take the span tag. This is to support ie6 png image that has been transform by a pngfix.
Example: $("img.rollover").rollover();

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. (function($){  
  2. 	$.fn.extend({   
  3. 		rollover: function() {   
  4. 			return this.each(function(i, el) {  
  5. 				if(el.nodeName == "SPAN") {
  6. 					if($(el).data("fileName") == undefined) {
  7. 						var tmp = el.css("filter").split("'")[1];
  8. 						$(el).data("extension", tmp.pop());
  9. 						$(el).data("fileName", tmp.join("."));
  10. 					}
  11. 					$(el).hover(
  12. 						function() { $(this).css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader"+"(src=\'"+$(el).data("fileName")+"_hover."+$(el).data("extension")+"\', sizingMethod='scale')")	},
  13. 						function() { $(this).css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader"+"(src=\'"+$(el).data("fileName")+"."+$(el).data("extension")+"\', sizingMethod='scale')") }
  14. 					);
  15. 				} else {
  16. 					if($(el).data("fileName") == undefined) {
  17. 						var tmp = el.src.split(".");
  18. 						$(el).data("extension", tmp.pop());
  19. 						$(el).data("fileName", tmp.join("."));
  20. 					}
  21. 					$(el).hover(
  22. 						function() { $(this).attr("src", $(this).data("fileName")+"_hover."+$(this).data("extension")) },
  23. 						function() { $(this).attr("src", $(this).data("fileName")+"."+$(this).data("extension")) }
  24. 					);
  25. 				} 
  26. 			}); 			
  27. 		}
  28. 	});       
  29. })(jQuery);

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.