jquery切換圖像src屬性

當我我mouseover.thumb我希望src被hello.gif替換，當我mouseout我希望src恢復到原來的價值。第一部分很簡單，但對於第二部分我不知道如何「記住」原始的src值。jquery切換圖像src屬性

$('.thumb').mouseover(function() { 
    current_src = $(this).attr("src"); 
    $(this).attr("src", basepath+"_img/hello.gif"); 
}); 

$('.thumb').mouseout(function() { 
    $(this).attr("src", ???); 
});

來源

2012-02-25 stef

$('.hover').mouseover(function() { $(this).data('src', $(this).attr("src")); $(this).attr("src", $(this).attr("data-hover")); }); $('.hover').mouseout(function() { $(this).attr("src", $(this).data('src')); });

只要把數據懸停是否有任何理由，你可以」 t使用CSS psuedo類？你可以使用：hover，具體來說。 – thescientist 2012-02-25 14:16:24

$('.thumb').mouseover(function() { 
    $(this).data('prev_src', $(this).attr('src')).attr("src", basepath+"_img/hello.gif"); 
}); 

$('.thumb').mouseout(function() { 
    $(this).attr("src", $(this).data('prev_src')); 
});

來源

2012-02-25 14:15:19 HackedByChinese

您可以使用jQuery的data方法

http://api.jquery.com/jQuery.data/

$('.thumb').mouseover(function() { 
    // save the original src here 
    $(this).data('src', $(this).attr("src")); 
    $(this).attr("src", basepath+"_img/hello.gif"); 
}); 

$('.thumb').mouseout(function() { 
    $(this).attr("src", $(this).data('src')); 
});

http://jsfiddle.net/StGdt/

來源

2012-02-25 14:14:55 Trevor

我寫了這個小jQuery插件：

(function($) { 
    jQuery.fn.toggleSource = function(img){ 
     return this.each(function() { 
     if(this.tagName.toLowerCase() != 'img') return; 
      var $this = $(this); 
      var orig = $this.attr('src'); 
      $this.mouseover(function(){ 
       $this.attr('src',img); 
      }); 
      $this.mouseout(function(){ 
       $this.attr('src', orig); 
      }); 
     }); 
    } 
})(jQuery);

你可以用這種方式：

$('.thumb').toggleSource('http://my.site/my.img');

來源

2012-02-25 14:34:42 core1024

這是更好的imagen畫質

<img src="http://placehold.it/300x200" alt="" class="hover" data-hover="http://placehold.it/350x250" />

來源

2014-07-02 23:45:24 user3799650

jquery切換圖像src屬性

回答

相關問題