Question

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.

Answer 1

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>