title: image replacement loop using javascript
body: <p>So I'm learning a image replacement technique on W3, and here's what I want:</p>
  
  <ol>
  <li><p>There is an image of a dog.</p></li>
  <li><p>When I click this image, this image will be replaced by a picture of a cat.</p></li>
  <li><p>However, if I click this image again, it will be replaced again by the dog that was
  originally there.        </p></li>
  <li><p>And if I click once more, the cat will replace the dog.</p></li>
  <li><p>And so on.</p></li>
  </ol>
  
  <p>How do I go about making a permanent loop of replacing these two images?</p>
  
  <p>Here's a link that's similar to what I want to do: </p>
  
  <p><a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_src" rel="nofollow">http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_src</a></p>
  
  <p>In that example if you click the image, it will replace the image once. But if you click on it a second time, the original image won't replace it.</p>
  
  <p>So yeah, any help on making an efficient algorithm that can constantly replace an original with a new image, will be greatly appreciated.</p>