當點擊它時改變圖像，然後改回它

我有問題，我不知道如何改變圖像時，它沒有點擊它.. 當用戶點擊圖像，它顯示應該是的圖像。但是，我想在點擊後更改圖像......如何做到這一點？現在，當你點擊圖片，它的變化，但停留在點擊的圖像和變化的默認只有一個，如果你的鼠標是不是形象..當點擊它時改變圖像，然後改回它

我的代碼..

<img src="pictures/fbutt.jpg" width="640" height="360" 
onmouseover="this.src='pictures/fbuttho.jpg'" 
onmouseout="this.src='pictures/fbutt.jpg'" onclick="this.src='pictures/fbuttac.jpg'"/>

來源

2015-05-27 Steven Tomko

你可以嘗試jQuery的onmouseup和onmousedown事件.. –

@DipenDedania - 任何例子，請？我是新來的JavaScript和jQuery。 –

@DipenDedania JQuery不會重新發明輪子。它對用戶也做同樣的事情。 – reporter

例如你的HTML是這樣的..

<img id="pic" src="pictures/fbutt.jpg" width="640" height="360"/>

給它分配一個id並綁定jQuery mouseup和mousedown事件。

<script> 
$(document).ready(function(){ 
    $("#pic") 
     .mouseup(function() { 
      $(this).attr('src','pictures/fbuttac.jpg'); 
     }) 
     .mousedown(function() { 
      $(this).attr('src','pictures/fbutt.jpg'); 
     }); 
}); 
</script>

來源

2015-05-27 09:01:22

我在哪裏寫jQuery代碼？我很抱歉這個愚蠢的問題，但我從來沒有做過什麼jQuery的..我試圖把它在標記，但不起作用.. –

我已經更新了代碼...看看@StevenTomko –

我做了，但它什麼都沒做..我在我的html中包含了jquery ..它很怪，因爲現在我在小提琴https://jsfiddle.net/fodxvssn/1/中嘗試它完美的作品，但在我的網頁上它不.. –

試試這個

<img id="testImage" src="http://i.huffpost.com/gen/964776/images/o-CATS-KILL-BILLIONS-facebook.jpg" alt="..." width="300" height="300" /> 

<script> 
    var imageEl = document.getElementById('testImage'); 
    var newImg = 'http://www.mycatspace.com/wp-content/uploads/2013/08/adopting-a-cat.jpg'; 
    var defaultImg = imageEl.src; 

    imageEl.onmousedown = function() { 
    this.src = newImg; 
    } 

    imageEl.onmouseup = function() { 
    this.src = defaultImg; 
    } 
</script>

來源

2015-05-27 09:01:34 yuyokk

看一看這個小演示使用jQuery： https://jsfiddle.net/fodxvssn/

$(document).ready(function() 
{ 
    $("#img").mouseup(function() 
    { 
     $(this).attr("src", "http://cdn.sstatic.net/stackoverflow/img/[email protected]?v=ea71a5211a91"); 
    }); 

    $("#img").mousedown(function() 
    { 
     $(this).attr("src", "http://i.stack.imgur.com/CE5lz.png"); 
    }); 
});

來源

2015-05-27 09:13:27 lionheart98

我投票你，因爲你的解決方案也可以！謝謝 –

當點擊它時改變圖像，然後改回它

回答

相關問題