Toggle Image Src Attribute Using Javascript

I am trying to change the HTML image src using Javascript. I have two images Plus.gif and Minus.gif.I have inserted HTML img tag and have written a Javascript function to change th

Solution 1:

See the changes I made to make it working

<scriptlanguage="javascript"type="text/javascript">functionchngimg() {
        var img = document.getElementById('imgplus').src;
        if (img.indexOf('Plus.gif')!=-1) {
            document.getElementById('imgplus').src  = 'Images/Minus.gif';
        }
         else {
           document.getElementById('imgplus').src = 'Images/Plus.gif';
       }

    }
</script><imgid="imgplus"alt=""src="Images/Plus.gif"onmouseover="this.style.cursor='pointer'"onclick="chngimg()"   />

Hope that resolves your question.

Solution 2:

One way would be to add a toggle variable in your function:

var toggle = false;
functionchngimg() {
    if (toggle === true) {
        document.getElementById('imgplus').src  = 'Images/Minus.gif';
    } else {
       document.getElementById('imgplus').src = 'Images/Plus.gif';
       alert(img); 
    }
    toggle = !toggle; 
}

---

Note that it's a better practice to use a sprite for this kind of thing. If you're using two images, the user experience is going to be clunky, because the first time they click the image, there will be a slight delay while the second image loads.

Ideally you would have the two images as a sprite sheet, and be using JQuery. Then you could just do it like this.

HTML

<img id="imgplus" src="Images/Sprite.gif" onclick="chngimg()" />

CSS

#imgplus.clicked { background-position: 0 -30px; }

Javascript

functionchngimg() {
    $("#imgplus").toggleClass("clicked");
}

Solution 3:

I have successfully used this general solution in pure JS for the problem of toggling an img url:

functiontoggleImg() {
  let initialImg = document.getElementById("img-toggle").src;
  let srcTest = initialImg.includes('initial/img/url');
  let newImg = {
    'true':'second/img/url', 
    'false':'initial/img/url'}[srcTest];

  return newImg;
}

Then call toggleImg() inside whatever event handler you use....

someButton.addEventListener("click", function() {
  document.getElementById("img-toggle").src = toggleImg();
}