CODEWITHSUNDEEP
javascripthtml
JamesM
JamesM

Reputation: 101

Change image in button on click

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!

Upvotes: 7

Views: 22529

Answers (4)

enhzflep
enhzflep

Reputation: 13109

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>

Upvotes: 2

swapnesh
swapnesh

Reputation: 26732

Check this a working example just copy paste and run-

HTML

<button onClick="action();">click me<img src="http://dummyimage.com/200x200/000000/fff.gif&text=Image+1" width="200px" id="ImageButton1"></button>

JAVASCRIPT

<script>
function action()
{
if(document.getElementById("ImageButton1").src == 'http://dummyimage.com/200x200/000000/fff.gif&text=Image+1' )
document.getElementById("ImageButton1").src = 'http://dummyimage.com/200x200/dec4ce/fff.gif&text=Image+2';
else
document.getElementById("ImageButton1").src = 'http://dummyimage.com/200x200/000000/fff.gif&text=Image+1';
}
</script>

Check this working example - http://jsfiddle.net/QVRUG/4/

Upvotes: 0

Laksitha Ranasingha
Laksitha Ranasingha

Reputation: 4517

It's not a good idea to use global variables in javascripts use a closure or object literal. You can do something like using a closure

(function(){
  var clickCounter = 0;
  var imgSrc1 = "src to first image";
  var imgSrc2 = "src to second image"
  functions swapImage (src)
  {
   var imgBut = document.getElementById("ImageButton1");
   imgBut.src = src;
  }

  function action()
  {
  if(clickCounter === 1)
  {
    swapImage(imgSrc1);
    --clickCounter;
  }else{
    swapImage(imgSrc2);
    ++clickCounter;
  }
}
})();

(I haven't run this code though)

This nice w3documentation gives you best practices.

Upvotes: 0

Dave Hogan
Dave Hogan

Reputation: 3221

You need to store the old value in a global variable.

For example:

var globalVarPreviousImgSrc;
var swapImage = function(src)
{
   var imgBut = document.getElementById("ImageButton1");

   globalVarPreviousImgSrc = imgBut.src;
   imgBut.src = src;
}

Then in the action method you can check if it was equal to the old value

function action()
{
  if(globalVarPreviousImgSrc != 'images/image2.png')
  {
    swapImage('images/image2.png');
  }else{
    swapImage(globalVarPreviousImgSrc);
  }
}

Upvotes: 0

Related Questions