如何在单击时更改按钮图像

Question

我正在使用图像和hrefs来创建按钮。代码如下所示：

<a href="http://www.zive.sk"><img src="res/images/zive.png" alt="Zive.sk" id="ziveCircle"></a>

如果用户按下按钮，有什么方法可以更改图像 src？也许一些事件处理程序将确定用户已按下图像？它应该充当正常按钮，因此当用户按下并按住它时，它应该更改图像 src，当他释放按钮时，应该加载 href（正常的按钮行为）。

PS：我不能为此使用css。

Answer 1

这会将按钮的图像更改为您的 StackOverflow 头像图标（相应地更改 URL）：

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：

document.getElementById('zive-anchor').onclick=function () {
    document.getElementById('zive-img').src = 
    "http://www.gravatar.com/avatar/ca2a5b453d7e221f50929cbf6d688e59?s=32&d=identicon&r=PG";
};​

JSFiddle：

http://jsfiddle.net/CsCSC/

Answer 2

我已经找到了一个解决方案，使用了一些希望我帮助的脚本。这是代码：

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

这是 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>

Answer 3

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

}