title: onClick(), onMouseOver() and onMouseOut() with image
body: <p>So far I've got this working so that it has a "basic" image, click image, and change image to "active image, but I don't want it to revert back to the original image when you mouse out if the image has been clicked--I want it to stay on the click image until another image is clicked.</p>
  
  <p>Here is my HTML</p>
  
  <pre><code>      &lt;div id="booking_i"&gt;
         &lt;img id="img" src="/design/zebra/images/booking/1stolik.png"&gt;
         &lt;img id="img2" src="/design/zebra/images/booking/2stolik.png"&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>In js would be something like</p>
  
  <pre><code>onmouseover="image.src='/design/zebra/images/booking/1stolik_aktiv.png'";
  onmouseout="image.src='/design/zebra/images/booking/1stolik.png'";
  onClick="image.src='/design/zebra/images/booking/1stolik_clicked.png'";
  </code></pre>