title: multiple sounds on different mouseovers
body: <p>I am finding trouble with multiple mousovers with different sounds. </p>
  
  <p>trouble: when i do a mousover on Rockbutton it will play the song of Popaudio. Is there a better way or a simple solution for this? Many thanks! </p>
  
  <pre><code>    // Muziekje Rock --------------------------------------------------Muziekje rock
      document.getElementById("RockButton").onmouseout = function() {mouseOut()};
      function mouseOver() { 
          document.getElementById('RockDanceAudio').play();
      }
      function mouseOut() { 
        document.getElementById('RockDanceAudio').pause();
      }
  
  
  
  
         document.getElementById("PopButton").onmouseout = function() {mouseOut()};
      function mouseOver() { 
          document.getElementById('PopAudio').play();
      }
      function mouseOut() { 
        document.getElementById('PopAudio').pause();
      }
  
  
  
  &lt;!-- Pagina3 Tatjana                                  PaginaDrieTatjana--&gt;
      &lt;div id="PaginaDrieTatjana" style="display:none;"&gt;
        &lt;h1&gt;Kies soort dans&lt;/h1&gt;
  
        &lt;div id="Rock"&gt;
          &lt;h3&gt;Rock Dance&lt;/h3&gt;
          &lt;img src="Tatjana/Een.jpg" style="width: 100%;"&gt;
          &lt;div id="RockButton"&gt;
              &lt;p&gt;Kiezen&lt;/p&gt;
              &lt;audio id="RockDanceAudio" src="rock_audio.mp3"&gt;&lt;/audio&gt;
          &lt;/div&gt;
        &lt;/div &gt;
  
        &lt;div id="Pop"&gt;
          &lt;h3&gt;Pop Dance&lt;/h3&gt;
          &lt;img src="Tatjana/Twee.jpg" style="width: 100%;"&gt;
          &lt;div id="PopButton"&gt;
              &lt;p&gt;Kiezen&lt;/p&gt;
              &lt;audio id="PopAudio" src="pop_audio.mp3"&gt;&lt;/audio&gt;
          &lt;/div&gt;
  </code></pre>