如何更改點擊按鈕圖像？

我正在使用圖像和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

如何更改點擊按鈕圖像？

回答

相關問題