title: Change image onclick and again change to previous image on clicking again - only using CSS and HTML
body: <p>I have tried following code which is onclicking an image it changes to another image and again it should switch back to previous image on clicking again. In below code the image will only stay visible while you are holding down the mouse button. I want to have it stay visible until you click again.  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;&lt;title&gt;HTML5 form&lt;/title&gt;&lt;link rel="SHORTCUT ICON" href="/e/ref.ico" /&gt;
  &lt;style type="text/css"&gt;
  div.nav {
  height: 340px;
  width: 300px;
  margin:0;
  padding:0;
  background-image:url("http://s24.postimg.org/6g070ei6d/logo.jpg");
  }
  
  div.nav a, div.nav a:link, div.nav a:visited {
  display:block;
  }
  
  div.nav img {
  border:0;
  }
  
  div.nav a:active img {
  visibility:hidden;
  .thumbnail:focus span
  visibility: visible;
  }
  &lt;/style&gt;
  &lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8'&gt;&lt;/head&gt;
  &lt;body&gt;
  &lt;div class="nav"&gt;
  &lt;a href="#"&gt;
  &lt;img src="http://s10.postimg.org/bthpk39yh/logo_red.jpg" alt="" /&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>