javascript 单击时如何更改按钮图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12516933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change button image on click?
提问by horin
I am using images and hrefs to create buttons. Code look like this:
我正在使用图像和 hrefs 来创建按钮。代码如下所示：
<a href="http://www.zive.sk"><img src="res/images/zive.png" alt="Zive.sk" id="ziveCircle"></a>
Is there any way to change image src if user press button? Maybe some event handler which will determine that user has pressed image? It should act as normal button so when user press it and keep pressed it should change image src and when he releases the button then the href should be loaded (normal button behaviour).
如果用户按下按钮，有什么方法可以更改图像 src 吗？也许某些事件处理程序将确定用户已按下图像？它应该作为普通按钮，所以当用户按下它并保持按下时，它应该改变图像 src，当他释放按钮时，应该加载 href（正常按钮行为）。
PS:I cannot use css for this.
PS：我不能为此使用 css。
回答by Daniel Li
This will change the button's image to your StackOverflow gravatar icon (change the URL accordingly):
这会将按钮的图像更改为您的 StackOverflow gravatar 图标（相应地更改 URL）：
HTML:
HTML:
<a id="zive-anchor" href="javascript:void(0);">
<img id="zive-img" src="res/images/zive.png" alt="Zive.sk" id="ziveCircle">
</a>?
Javascript:
Javascript:
document.getElementById('zive-anchor').onclick=function () {
document.getElementById('zive-img').src =
"http://www.gravatar.com/avatar/ca2a5b453d7e221f50929cbf6d688e59?s=32&d=identicon&r=PG";
};?
JSFiddle:
JSFiddle：
回答by horin
I have found a solution, using some of Hope I Helped script. Here is the code:
我找到了一个解决方案，使用了一些 Hope I Helped 脚本。这是代码：
function buttons(){
document.getElementById('zive-anchor').onmousedown=function () {
document.getElementById('ziveCircle').src =
"res/images/zivePressed.png";
};
document.getElementById('zive-anchor').onmouseout=function () {
document.getElementById('ziveCircle').src =
"res/images/zive.png";
};
};
and here is HTML:
这是 HTML：
<div data-role="page" id="homepage">
<div id="selectCircle">
<a href="feeds.html#page1" rel="external" id="zive-anchor"><img src="res/images/zive.png" alt="Zive.sk" id="ziveCircle"></a>
回答by Zain
function play()
{
var player= document.getElementById("audio");
if(player.paused)
player.play();
else
player.pause();
change();
}
function change()
{
var imag = document.getElementById("play")
if(imag.src.match('Play'))
imag.src="pause.jpg";
else
imag.src="Play.jpg";
}
