title: Onmouseover play different audio files for different image maps
body: <p>I'm trying to make something that when you scroll over a certain part of the image, a different song plays with the onmouseenter and onmouseleave functions. It worked for the first image map, but for some reason it doesn't work with the second image map though it's pretty much the same. I don't understand what I am doing wrong.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;body&gt;
          &lt;img src="Uclashoes.jpeg" alt="EmptyShoes" width="1423" height="818" usemap="#shoesmap"&gt;
      &lt;/body&gt;
      &lt;a onmouseenter="document.getElementById('audioIDNerine').play()"
      onmouseleave="document.getElementById('audioIDNerine').pause()"&gt;
          &lt;map name="shoesmap"&gt;
              &lt;area shape ="rect" coords="980,400,1070,450"/&gt;
          &lt;/map&gt;
      &lt;/a&gt;
      &lt;audio id="audioIDNerine"&gt;
          &lt;source src="Nerine.mp3" type="audio/mpeg"&gt;
          Your browser does not support the audio element.
      &lt;/audio&gt;
      &lt;a onmouseenter="document.getElementById('audioIDAriya').play()" onmouseleave="document.getElementById('audioIDAriya').pause()"&gt;
          &lt;map name="shoesmap"&gt;
              &lt;area shape ="rect" coords="1170,644,1293,790"/&gt;
          &lt;/map&gt;
      &lt;/a&gt;
      &lt;audio id="audioIDAriya"&gt;
          &lt;source src="Ariya.mp3" type="audio/mpeg"&gt;
          Your browser does not support the audio element.
      &lt;/audio&gt;
  &lt;/html&gt;
  </code></pre>