title: Toggle image src attribute using Javascript
body: <p>I am trying to change the HTML image <code>src</code> using Javascript. I have two images Plus.gif and Minus.gif.I have inserted HTML <code>img</code> tag and have written a Javascript function to change the image <code>src</code> when clicked. </p>
  
  <p>Problem is that I want to change it back again when user clicks on the image. 
  For example when the page is loaded the <code>Plus.gif</code> shows and when user clicks on it the image it changes to <code>Minus.gif</code>. </p>
  
  <p>I want it so, when the image is <code>Minus.gif</code> and user clicks on it this should be changed to <code>Plus.gif</code>.</p>
  
  <p>Here is my Javascript function:</p>
  
  <pre><code>&lt;script language="javascript" type="text/javascript"&gt;
    function chngimg() {
      var img = document.getElementById('imgplus').src; //= 'Images/Minus.gif';
  
      if (img) {
        document.getElementById('imgplus').src = 'Images/Minus.gif';
      } else if (!img) {
        document.getElementById('imgplus').src = 'Images/Plus.gif';
        alert(img);
      }
  
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>Image tag:</p>
  
  <pre><code>&lt;img id="imgplus" alt="" src="Images/Plus.gif" onmouseover="this.style.cursor='pointer'" onclick="chngimg()"   /&gt;
  </code></pre>