javascript - How to change button image on click? - Stack Overflow

admin管理员组

文章数量:1417554

I am using images and hrefs to create buttons. Code look like this:

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

Is there any way to change image src if user press button? Maybe some event handler which will determine that user has pressed image? It should act as normal button so when user press it and keep pressed it should change image src and when he releases the button then the href should be loaded (normal button behaviour).

PS: I cannot use css for this.

I am using images and hrefs to create buttons. Code look like this:

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

Is there any way to change image src if user press button? Maybe some event handler which will determine that user has pressed image? It should act as normal button so when user press it and keep pressed it should change image src and when he releases the button then the href should be loaded (normal button behaviour).

PS: I cannot use css for this.

• javascript
• html
• button
• pressed

Share Improve this question Follow edited Sep 20, 2012 at 16:46 nana 4,49111 gold badge3737 silver badges4949 bronze badges asked Sep 20, 2012 at 16:30 horinhorin 1,65466 gold badges2323 silver badges5353 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

This will change the button's image to your StackOverflow gravatar icon (change the URL accordingly):

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./avatar/ca2a5b453d7e221f50929cbf6d688e59?s=32&d=identicon&r=PG";
};​

JSFiddle:

http://jsfiddle/CsCSC/

I have found a solution, using some of Hope I Helped script. Here is the code:

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

and here is 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>

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



}

本文标签： javascriptHow to change button image on clickStack Overflow