javascript - 如何在点击时更改按钮图像？

Question

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

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

JSF中：

http://jsfiddle.net/CsCSC/

Answer 2

我找到了一个解决方案，使用了一些 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";
};
};

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



}