Highlighted

add anchor-element to a link in a map?

New Here ,
Mar 12, 2020

Copy link to clipboard

Copied

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>

			

 

 

Topics

How to

Views

190

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

add anchor-element to a link in a map?

New Here ,
Mar 12, 2020

Copy link to clipboard

Copied

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>

			

 

 

Topics

How to

Views

191

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Mar 12, 2020

Copy link to clipboard

Copied

A link is an anchor.  Nested anchors are not allowed in HTML. 

 

It's unfortunate that you chose to use an image map for this.  Image maps are not responsive.  Also it's much simpler to work with straight image or text links. 

 

You rarely encounter sound effects on sites because they don't work well.  Sound is more appropriate for games and device apps where all assets are preloaded.  

 

Good luck!

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Learn Resources
Add a group