单击链接/项目时如何制作弹出文本？

Question

I am sorry for extremely straight forward question for web developers... would really appreciate your help here!

I have an image that I split into sections using <\\map>

Example:

<map name="guessing_game">

<area alt="" title="" href="#1" shape="poly" coords="709,202,714,187,687,161,655,138,628,90,621,59,630,35,640,19,661,12,686,12,705,17,722,31,729,36,751,22,774,18,801,26,817,33,832,65,821,109" />


 <area alt="" title="" href="#2" shape="poly" coords="275,363,280,350,240,317,202,268,189,227,200,193,219,178,247,178,264,175,285,193,295,204,313,189,342,183,369,186,392,202,400,231,395,267,363,309" />

<area alt="" title="" href="#3" shape="poly" coords="554,364,557,351,520,318,473,260,468,227,471,203,481,187,506,178,521,174,548,180,562,189,569,203,579,201,594,186,626,182,651,186,668,207,676,235,668,263,646,299" />
</map>

I would like to make a popup effect the same as in this example

So if someone will click on the link/aria they will get a different dialog.... with different position of the popup bubble.

Unfortunately I ran into the issue that if I try to use multiple text variations.... using the example above it will always return the same text no matter what link/aria I will click on.

 <style> /* Popup container - can be anything you want */ .popup { position: relative; display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* The actual popup */ .popup .popuptext1 { visibility: hidden; width: 160px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 8px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -810px; margin-bottom: 320px; } .popup .popuptext2 { visibility: hidden; width: 160px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 8px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -520px; margin-bottom: 300px; } /* Popup arrow */ .popup .popuptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } /* Toggle this class - hide and show the popup */ .popup .show { visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s; } /* Add animation (fade in the popup) */ @-webkit-keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } @keyframes fadeIn { from {opacity: 0;} to {opacity:1 ;} } </style> <script> // When the user clicks on div, open the popup function myFunction() { var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); } function myFunction() { var popup = document.getElementById("myPopup2"); popup.classList.toggle("show"); } </script> <img src="./image.jpg" alt="Picture" style="width:auto;max-width:100%" usemap="#guessing_game"> <map name="guessing_game"> <div class="popup" onclick="myFunction()"> <span class="popuptext1" id="myPopup"><strong>Header</strong><br> First variation</span> <area alt="Header" title="Header" shape="poly" coords="122,200,125,184,94,159,63,129,42,91,31,59,38,40,59,10,89,10,111,12,132,24,140,38,153,25,174,15,210,18,230,28,245,55,246,87,224,124,178,161" /> </div> <div class="popup" onclick="myFunction()"> <span class="popuptext2" id="myPopup2"><strong>Header 2</strong><br>Second text variation </span> <area alt="Header 2" title="Header 2" shape="poly" coords="417,200,419,183,389,160,336,97,327,61,339,26,356,14,380,11,404,13,418,20,432,34,450,28,477,17,508,19,535,41,536,81,525,112" /> </div> 

please help... I am extremely sorry for such a basic question... I am sure there is a huge and simple mistake in the CSS or javascript function

Answer 1

You should be passing in the context of this to your onclick handler

onclick="myFunction(this)

function myFunction(el) {
console.log(el);
    var popup = el;
    popup.classList.toggle("show");
}

Answer 2

Thank you so much unicorn2!

Now if I create separate function for different dialogs it will work just fine...

Here is how I do it now... First I create different classes for different positions:

 .popup .popuptext1 { visibility: hidden; width: 160px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 8px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -810px; margin-bottom: 320px; } .popup .popuptext2 { visibility: hidden; width: 160px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 8px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -520px; margin-bottom: 300px; } 

Then I create functions for different dialogs

 function dialog1() { var popup = document.getElementById("dialog1"); popup.classList.toggle("show"); } function dialog2() { var popup = document.getElementById("dialog2"); popup.classList.toggle("show"); } 

And after that I apply it to the image

 <div class="popup" onclick="dialog1()"> <span class="popuptext1" id="dialog1"><strong>Header 1</strong><br> Text that is different from the second one!</span> <area alt="Header" title="Header" shape="poly" coords="122,200,125,184,94,159,63,129,42,91,31,59,38,40,59,10,89,10,111,12,132,24,140,38,153,25,174,15,210,18,230,28,245,55,246,87,224,124,178,161" /> </div> <div class="popup" onclick="dialog2()"> <span class="popuptext2" id="dialog2"><strong>Header 2</strong><br>Thext that is not the same as the first one</span> <area alt="Header2" title="Header2" shape="poly" coords="417,200,419,183,389,160,336,97,327,61,339,26,356,14,380,11,404,13,418,20,432,34,450,28,477,17,508,19,535,41,536,81,525,112" /> </div> 

I wish I knew some better slick way of doing it... than creating different functions for different dialogs... but I am too unexperienced yet.

Thank you <3 I hope this will help some newbies like me in future!