Question

22

Change image in button on click

rated 0 times [ 25] [ 3] / answers: 1 / hits: 22202 / 11 Years ago, sun, may 19, 2013, 12:00:00

I've got a button with an image inside that I want to swap when clicked. I got that part working, but now I also want it to change back to the original image when clicked again.

The code I'm using:

<button onClick=action();>click me<img src=images/image1.png width=16px id=ImageButton1></button>

And the Javascript:

function action() {

  swapImage('images/image2.png');

};



var swapImage = function(src) {

  document.getElementById(ImageButton1).src = src;

}

Thanks in advance!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kadinl

Add To Favorites

Follow

Total Points: 321

Total Questions: 117

Total Answers: 103

Location: Nepal

Member since Mon, Jan 4, 2021

3 Years ago

answered 11 Years ago kamronr · Accepted Answer

While you could use a global variable, you don't need to. When you use setAttribute/getAttribute, you add something that appears as an attrib in the HTML. You also need to be aware that adding a global simply adds the variable to the window or the navigator or the document object (I don't remember which).

You can also add it to the object itself (i.e as a variable that isn't visible if the html is viewed, but is visible if you view the html element as an object in the debugger and look at it's properties.)

Here's two alternatives. 1 stores the alternative image in a way that will cause it to visible in the html, the other doesn't.

<!DOCTYPE html>

<html>

<head>

<script>

function byId(e){return document.getElementById(e);}



window.addEventListener('load', mInit, false);



function mInit()

{

    var tgt = byId('ImageButton1');

    tgt.secondSource = 'images/image2.png';

}



function byId(e){return document.getElementById(e);}



function action() 

{

    var tgt = byId('ImageButton1');

    var tmp = tgt.src;

    tgt.src = tgt.secondSource;

    tgt.secondSource = tmp;

};



function action2()

{

    var tgt = byId('imgBtn1');

    var tmp = tgt.src;

    tgt.src = tgt.getAttribute('src2');

    tgt.setAttribute('src2', tmp);

}

</script>

<style>

</style>

</head>

<body>

    <button onClick=action();>click me<img src=images/image1.png width=16px id=ImageButton1></button>

    <br>

    <button onClick=action2();>click me<img id='imgBtn1' src=images/image1.png src2='images/image2.png' width=16px></button>

    </body>

</html>