Popup certain points of image to display text

Question

I have an image of map like this:

I searched in google but I don't find any.

I want to know if there is a JS or Jquery Library to implement some popup or tooltip when mouse is over certain points and show description of each point in this image.

For example, if I put mouse over USA I want to display some popup and if I put mouse over Mexico I want another one. If there is any example I appreciate it. Regards

Please provide more information. What is this picture being displayed on? an `` element? a ` — clabe45, May 28 '18 at 23:11
Maybe this can help http://datamaps.github.io/. If you want to use that specific image and just show info on hover, only thing that comes to mind is placing html elements over the images and listen the `mouseover` event to show whatever you want to show, maybe this can help in that case http://iamceege.github.io/tooltipster/ — egvaldes, May 28 '18 at 23:16

score 2 · Answer 1 · answered May 28 '18 at 23:21

2

You can use mapael It's an open source jQuery plugin offers exactly what you're asking for.

Check this demo and here is more examples

And check here for Github source code.

answered May 28 '18 at 23:21

awran5

4,333
2
15
32

Danziger · Accepted Answer · 2018-05-28T23:50:07.150

You can use a <map> with multiple <area> elements to create the clickable regions and listen for click events on them.

Then, you need to prevent default calling Event.preventDefault() and handle that in whatever way you want, such as opening a popup or overlay on top of the map.

Here's a simple example where you can click the US:

document.getElementById('mapMap').onclick = (e) => {
    e.preventDefault();
    
    if (e.target.dataset.country === 'US') {
      alert('Hi!');
    }
};

body {
  margin: 0;
}

#mapImage {
  max-width: 420px;
}

<img id="mapImage" src="https://i.stack.imgur.com/C2Mha.png" usemap="#map">

<map id="mapMap" name="map">
  <area data-country="US" shape="poly" coords="54,70,119,68,96,94,59,86,54,79" href="#">
</map>

The main issue with this approach is that the <area> coordinates are defined in CSS pixels, so you will need to use JavaScript to recalculate the coordinates based on the size of the image, unless it always has the same size.

David Thomas provided an implementation of that here: Is possible create map html area in percentage?

Then, another limitation is that you can't apply hover styles on the <area> elements, but again, you could use JavaScript to draw the shape of the <area>, using its shape and coords attributes on a <canvas> and overlay that over the map with pointer-events: none to prevent it from getting MouseEvents (click, hover...) that should go to the <area>.

enhzflep provided an implementation of the here too: How to apply Hovering on html area tag?

Another alternative could be to use an <svg> instead of an <img>, which can handle all that nicely and easily.

score 0 · Answer 3 · answered Jan 11 '22 at 08:56

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style>
body {
  background-repeat: no-repeat;
  background-attachment: fixed; 
  overflow: hidden;
}
</style> 
</style>    
</head>


<body>

<div class "container">
    <div class "picture">
        <img id="mapImage" src="put_text_heatmap.jpg"  height="1036px" width="1237px" usemap="#map">
        <map id="mapMap" name="map">
          <area data-brand="Ajile" href="dashboard_images/9.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="127, 629, 283, 869">
          <area data-brand="Honey" href="dashboard_images/8.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="514, 842, 803, 1024">
          <area data-brand="Akkriti" href="dashboard_images/7.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="774, 265, 909, 409">
          <area data-brand="Cosmatics" href="dashboard_images/6.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="985, 809, 1139, 992">
          <area data-brand="Annabelle" href="dashboard_images/5.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="258, 442, 429, 584">
          <area data-brand="Sunglases" href="dashboard_images/4.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="827, 851, 980, 1033">
          <area data-brand="VanHeusen" href="dashboard_images/3.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="343, 611, 514, 753">
          <area data-brand="jealous" href="dashboard_images/2.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="500, 358, 595, 409">
          <area data-brand="Denim" href="dashboard_images/1.PNG" id="snowballAppear" shape="rect" style="display: none" height="480px" width="640px" coords="163, 879, 334, 999">
        </map>
        
    </div>
</div>


</body>
<script>
window.onload = function() {
      document.getElementById("mapMap").addEventListener("click", function (e) {
          <!-- alert("CLICKED"); -->
        var img = document.createElement('img'); 
        $("#snowballAppear")[0].appendChild(img);
      });
};
</script>
</html>

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jan 11 '22 at 10:08
You have closed the style tag twice `` _ You should edit your answer and remove one copy of the closed tag. Doing this will make the rest of your code display work correctly — inputforcolor, Jan 13 '22 at 19:41

score 0 · Answer 4 · answered Jan 15 '22 at 06:50

<html>
    <head>
        
            body {
              background-repeat: no-repeat;
              background-attachment: fixed;
              <!-- overflow: hidden; -->
            }
        </style>
    </head>

    <body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <style>
        <div id="modal-background">
            <div id="modal-content"></div>
        </div>

        <img id="IMGMAPS" src="put_text_heatmap.jpg" height="1036px" width="1237px" usemap="#image-maps" alt="" />
        <map name="image-maps" id="IMGMAPS">
            <area data-brand="Ajile" data-imageurl="dashboard_images/9.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="127, 629, 283, 869" , target="_self" />
            <area data-brand="Honey" data-imageurl="dashboard_images/8.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="514, 842, 803, 1024" , target="_self" />
            <area data-brand="Akkriti" data-imageurl="dashboard_images/7.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="774, 265, 909, 409" , target="_self" />
            <area data-brand="Cosmatics" data-imageurl="dashboard_images/6.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="985, 809, 1139, 992" , target="_self" />
            <area data-brand="Annabelle" data-imageurl="dashboard_images/5.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="258, 442, 429, 584" target="_self" />
            <area data-brand="Sunglases" data-imageurl="dashboard_images/4.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="827, 851, 980, 1033" target="_self" />
            <area data-brand="VanHeusen" data-imageurl="dashboard_images/3.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="343, 611, 514, 753" target="_self" />
            <area data-brand="jealous" data-imageurl="dashboard_images/2.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="500, 358, 595, 409" target="_self" />
            <area data-brand="Denim" data-imageurl="dashboard_images/1.PNG" shape="rect" style="display: none;" height="480px" width="640px" coords="163, 879, 334, 999" target="_self" />
        </map>

        <script>
            $(document).ready(function () {
                $("area").click(function () {
                    $("#modal-content").html("<img src=" + $(this).data("imageurl") + ">");
                    $("#modal-background").fadeIn();
                });

                $("#modal-background").click(function () {
                    closeModal();
                });
            });

            function closeModal() {
                $("#modal-background").fadeOut();
            }
        </script>
    </body>
</html>

While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please [include an explanation for your code](//meta.stackexchange.com/q/114762/269535), as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. — Luca Kiebel, Jan 20 '22 at 11:52

Popup certain points of image to display text

4 Answers4