add anchor-element to a link in a map?

Is it possible to add an anchor-element to a link, which is located in a map/hotspot?

Detailed: I have an image, in which I created several hotspots. These hotspots are links. Hovering over the hotspot-links changes the color of the hotspots and brings up some funny sounds.

Problem: If you hover very fast, the sounds can't overlay each other. The only method I found to solve that problem is to have an <a href> in combination with $("#nav-two a").

	<ul id="nav-two" class="nav">
		   <li>
		   	<a href="#">Home</a>
		   	<audio id="beep-two" >
				<source src="audio/beep.mp3" ></source>
				<source src="audio/beep.ogg" ></source>
				Your browser isn't invited for super fun time.
			</audio>
			</li>
		   <li><a href="#">About</a></li>
		   <li><a href="#">Clients</a></li>
		   <li><a href="#">Contact Us</a></li>
		</ul>
		
		<script>
			
$("#nav-two a")
  .each(function(i) {
    if (i != 0) { 
      $("#beep-two")
        .clone()
        .attr("id", "beep-two" + i)
        .appendTo($(this).parent()); 
    }
    $(this).data("beeper", i);
  })
  .mouseenter(function() {
    $("#beep-two" + $(this).data("beeper"))[0].play();
  });
$("#beep-two").attr("id", "beep-two0");</script>
		

I could'nt find a way to combine this method with the hotspot, which appears in the code as this:

<ul id="nav-one" class="nav">
	<audio id="beep-one" preload="auto">
		<source src="audio/beep.mp3"></source>
	</audio>
	  <area href="seiten/kontakt.html" shape="poly" class="module" coords="374,319,322,297" onMouseOver="MM_swapImage('image1','','images/kontakt_gelb_groß.jpg',1)" onMouseOut="MM_swapImgRestore()" usemap="#kontakt">
</ul>	
<script>
		var beepOne = $("#beep-one")[0];
$("#nav-one")
	.mouseenter(function() {
		beepOne.play();
	});
</script>