title: How do I fire a javascript playsound event onclick without sending the user to the top of the page?
body: <p>I have the following code on a page on my site — when the user clicks on the image a sound plays:</p>
  
  <pre><code>&lt;script language="javascript" type="text/javascript"&gt;
   function playSound(soundfile) {
   document.getElementById("dummy").innerHTML=
   "&lt;embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" /&gt;";
   }
   &lt;/script&gt;
   &lt;span id="dummy"&gt;&lt;/span&gt;
   &lt;div id="soundimage"&gt;
   &lt;a href="#" onclick="playSound('sound.mp3');"&gt;&lt;img src="image.png" /&gt;&lt;/a&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>It all works great, but the image is at the bottom of the page, and when the user clicks the image they are redirected back to the top of the page. Is there any way to get this working so that there is only an audio change, and not a visual one (if that makes sense!)?</p>
  
  <p>When using a mouseover function instead, such as</p>
  
  <pre><code>&lt;a onmouseover="playSound('sound.mp3');"&gt;&lt;img src="image.png" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>the user remains where they were on the page, but I would like them to have the option of playing the sound on click and not on rollover.</p>