Posted By

frankyfish on 03/17/10


Tagged

javascript plugin jquery rollover


Versions (?)

jQuery RollOver plugin


 / Published in: jQuery
 

What it does is look for img tag and on rollover change the source path from "anyimage.jpg" to "anyimagehover.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();

  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  

You need to login to post a comment.