如何更改点击按钮图像？

我正在使用图像和hrefs来创建按钮。代码如下所示：如何更改点击按钮图像？

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

有什么办法，如果用户按下按钮来改变图像的src？也许某些事件处理程序将确定用户已按下图像？它应该作为正常的按钮，所以当用户按下它并保持按下时，它应该改变图像src，当他释放按钮时，应该加载href（正常按钮行为）。

PS：我不能使用CSS来做到这一点。

来源

2012-09-20 horin

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

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>

来源

2012-09-20 17:10:06 horin

你不使用CSS的原因是什么？ – Phix

是的，我有我的图像对齐使用CSS，它不工作时，我曾尝试把背景（“res/images/zive.pnh”）;.但它功能强大，完全没有图像显示，我100％确定图像路径是正确的 – horin

这将按钮的图像更改为您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/

来源

2012-09-20 16:36:20

以及它是工作，但它不是我想要的。因为我想将href保留在页面http://www.zive.sk上，当用户停止按下按钮时，它应该变回正常图像。我希望它看起来像这样http://img.usabilitypost.com/0812/active_button/index.html。 – horin

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



}

来源

2013-07-05 04:12:41 Zain

如何更改点击按钮图像？

回答

相关问题