onHover image替換

Question

我是新來的JavaScript和jQuery。

我有一個簡單的腳本，它替換圖像時，它與另一個盤旋。我想做一個簡單的改變。懸停結束後，圖像會返回到第一張圖像。

我希望它保持，除非它再次被徘徊。我正試圖實現2個圖像之間的循環。當您將鼠標懸停在另一張圖片上並停留在第二張圖片上時。當你再次懸停，這次它回到第一個圖像，並保持它。

http://jsfiddle.net/S6pWg/

$('#bir').hover(function() { 
    $(this).attr('src', 'img/2.jpg') 
}, 

function() { 
    $(this).attr('src', 'img/1.jpg') 
}) 

Answer 1

這是我對你的解決方案：http://jsfiddle.net/9JM6B/

我添加了幾個數據屬性的形象，所以你只有所有的圖像一個jQuery代碼，那應該表現得像這個。

HTML

<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/ONE_Campaign.svg" data-alternative="http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png" data-state="0"> 

jQuery的

$('img').on('mouseover', function() { 
    if($(this).data('state') == 0) 
    { 
     $(this).data('original', $(this).attr('src')); 
     $(this).attr('src', $(this).data('alternative')); 
     $(this).data('state','1'); 
    } 
    else 
    { 
     $(this).attr('src', $(this).data('original')); 
     $(this).data('state','0'); 
    } 
}); 

Answer 2

我建議這樣的代碼：

var hoverStatus = 0; 
    $('#imgHover').mouseenter(function() { 
     if(hoverStatus == 0) { 
      $(this).attr('src','http://hasslefreeliving.com/wp-content/uploads/2012/10/placeholder.gif'); 
      hoverStatus = 1; 
     } else { 
      $(this).attr('src','http://www.edrants.com/wp-content/uploads/2009/09/placeholder.jpg'); 
      hoverStatus = 0; 
     } 
    }); 

你當然可以使用像 「hoverStatus」 另一個屬性，而不是額外的變量

JS小提琴：http://jsfiddle.net/2YcYG/

Answer 3

你需要做這樣的事情

var hoverStatus =0; 


    $('#bir').hover(function(){ 
     if(hoverStatus ==0) 
     { 
      $(this).attr('src','img/2.jpg'); 
      hoverStatus =1; 
     } 
     else 
     { 
      $(this).attr('src','img/1.jpg'); 
      hoverStatus =0; 
     } 
    }, 
    function(){ 

    } 
) 

Answer 4

試試這個，在這裏我們使用了兩個圖像變量和MouseEnter事件變化的圖像。

var img1 = 'http://www.pizzatower.com/img/icons/Pizza-icon.png'; 

var img2 = 'http://danosdelivers.com/wp-content/uploads/2013/03/danos-supreme-pizza-2-256x256.jpg'; 

$('#bir').mouseenter(function() { 
    var currentImg = $(this).attr('src'); 
    if(currentImg == img1) 
     currentImg = img2; 
    else 
     currentImg = img1; 
    $(this).attr('src',currentImg); 
}); 

Here是工作的jsfiddle。