点击按钮改变图像

问题描述：

我有一个按钮，里面有一个图像，我想单击时进行交换。我得到了这部分工作，但现在我也希望它再次点击时，改回原来的形象。点击按钮改变图像

我正在使用的代码：

<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; 
}

提前感谢！

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>

，完美的工作，感谢这样的！ – 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); 
    } 
}

当我使用它时，图像会在第一次点击时发生变化，但不会变回。 – 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/

我无法使其工作。我把它放在一个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为您提供了最佳实践。

点击按钮改变图像

相关推荐