title: Onclick (onmousdown) change image
body: <p>Goal: when someone clicks on the logo on my website it appears to be "pushed" by changing the image to a different one with a stronger inner shadow or to one that has a top padding of a few pixels.</p>
  
  <p>I've been reading boards on here and trying tutorial after tutorial to get this to work yet am still having issues.  Where I'm at now is going back to very simple code... no extra CSS... no javascript, but am finding that I probably will have to use one or both of those.  Right now (with very basic html and no CSS or JS) I am finding that when my logo is clicked on the 2nd image appears but is BEHIND the first.  The first image doesn't go away and I can only see the test image glowing behind it when clicked on (probably because I'm using 'background-image' but it's the only way I've been able to see any kind of change).</p>
  
  <pre><code>&lt;div class="logo"&gt;&lt;a href="index.html"&gt;&lt;img src="images/logo.png" onmousedown="this.style.cssText='background-image:  url(images/logo-click.png)'" onmouseup="this.style.cssText='background-image:  url(images/logo.png)'" /&gt;&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS I can handle but my knowledge of JS is limited so if this has to involve JS please point me to a template or tutorial.  I have found tons of tutorials about how to create this effect from scratch in CSS but I can't do that with my logo as it is an image.  </p>
  
  <p>It seems like it should be simple to show one main image, click on it to show a different one, and let go of your click to show the original with no fancy smooth transition effects.  Yet... I am struggling with this.  </p>