點擊按鈕改變圖像

我有一個按鈕，裏面有一個圖像，我想單擊時進行交換。我得到了這部分工作，但現在我也希望它再次點擊時，改回原來的形象。點擊按鈕改變圖像

我正在使用的代碼：

<button onClick="action();">click me<img src="images/image1.png" width="16px" id="ImageButton1"></button>

和JavaScript：

function action() { 
    swapImage('images/image2.png'); 
}; 

var swapImage = function(src) { 
    document.getElementById("ImageButton1").src = src; 
}

提前感謝！

來源

2013-05-19 JamesM

http://stackoverflow.com/questions/10465082/change-button-image-after-click-to-loading-and-then-with-another-image-after-1?rq=1 – 2013-05-19 09:27:19

你忘了問一個問題。 – nnnnnn

雖然你可能使用全局變量，你不需要。當你使用setAttribute/getAttribute時，你會添加一些在HTML中顯示爲attrib的東西。你還需要知道，添加全局變量只是將變量添加到窗口或導航器或文檔對象中（我不記得是哪個）。您也可以將它添加到對象本身（即作爲一個變量，如果查看html時不可見，但在調試器中查看html元素作爲對象並查看它的屬性時可見）。）

這裏有兩種選擇。 1以一種可以使它在html中可見的方式存儲替代圖像，而另一種則不會。

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function byId(e){return document.getElementById(e);} 

window.addEventListener('load', mInit, false); 

function mInit() 
{ 
    var tgt = byId('ImageButton1'); 
    tgt.secondSource = 'images/image2.png'; 
} 

function byId(e){return document.getElementById(e);} 

function action() 
{ 
    var tgt = byId('ImageButton1'); 
    var tmp = tgt.src; 
    tgt.src = tgt.secondSource; 
    tgt.secondSource = tmp; 
}; 

function action2() 
{ 
    var tgt = byId('imgBtn1'); 
    var tmp = tgt.src; 
    tgt.src = tgt.getAttribute('src2'); 
    tgt.setAttribute('src2', tmp); 
} 
</script> 
<style> 
</style> 
</head> 
<body> 
    <button onClick="action();">click me<img src="images/image1.png" width="16px" id="ImageButton1"></button> 
    <br> 
    <button onClick="action2();">click me<img id='imgBtn1' src="images/image1.png" src2='images/image2.png' width="16px"></button> 
    </body> 
</html>

來源

2013-05-19 10:22:19 enhzflep

，完美的工作，感謝這樣的！ – JamesM

您需要將舊值存儲在全局變量中。

例如：

var globalVarPreviousImgSrc; 
var swapImage = function(src) 
{ 
    var imgBut = document.getElementById("ImageButton1"); 

    globalVarPreviousImgSrc = imgBut.src; 
    imgBut.src = src; 
}

然後在操作方法，你可以檢查它是否等於舊值

function action() 
{ 
    if(globalVarPreviousImgSrc != 'images/image2.png') 
    { 
    swapImage('images/image2.png'); 
    }else{ 
    swapImage(globalVarPreviousImgSrc); 
    } 
}

來源

2013-05-19 09:28:30 DaveHogan

當我使用它時，圖像會在第一次點擊時發生變化，但不會變回。 – JamesM

檢查這個工作的例子只是複製粘貼和運行 -

HTML

<button onClick="action();">click me<img src="http://dummyimage.com/200x200/000000/fff.gif&text=Image+1" width="200px" id="ImageButton1"></button>

JAVASCRIPT

<script> 
function action() 
{ 
if(document.getElementById("ImageButton1").src == 'http://dummyimage.com/200x200/000000/fff.gif&text=Image+1') 
document.getElementById("ImageButton1").src = 'http://dummyimage.com/200x200/dec4ce/fff.gif&text=Image+2'; 
else 
document.getElementById("ImageButton1").src = 'http://dummyimage.com/200x200/000000/fff.gif&text=Image+1'; 
} 
</script>

入住這工作例子 - http://jsfiddle.net/QVRUG/4/

來源

2013-05-19 09:32:50 swapnesh

我無法使其工作。我把它放在一個jsfiddle中，它在那裏也不起作用。 HTTP：//的jsfiddle。net/LqTGJ/ – JamesM

@JamesM請chk更新的小提琴，並讓我知道如果你有任何問題 – swapnesh

圖片也沒有改變，我認爲。 – JamesM

這不是JavaScript中使用全局變量是一個好主意使用封閉或對象字面值。你可以不喜歡使用封閉

(function(){ 
    var clickCounter = 0; 
    var imgSrc1 = "src to first image"; 
    var imgSrc2 = "src to second image" 
    functions swapImage (src) 
    { 
    var imgBut = document.getElementById("ImageButton1"); 
    imgBut.src = src; 
    } 

    function action() 
    { 
    if(clickCounter === 1) 
    { 
    swapImage(imgSrc1); 
    --clickCounter; 
    }else{ 
    swapImage(imgSrc2); 
    ++clickCounter; 
    } 
} 
})();

（我沒有，雖然運行這段代碼）

這個漂亮w3documentation爲您提供了最佳實踐。

來源

2013-05-19 09:44:55

點擊按鈕改變圖像

回答

相關問題