如何更改点击按钮图像？

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

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

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 2

这将按钮的图像更改为您StackOverflow的Gravatar图标（相应地更改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 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"; 



}