graphic with hotspot mouse over popups

Question

User-125499312 posted

i have a complex graphic with many small pictures in it.

how would I create hotspots on the graphic so that when the user moves the mouse cursor over a picture, a popup appears explaining what the picture is

thx for ur help 

Answer 1

User1535942433 posted

Hi yzidell,

Accroding to your description,I suggest you could use bootstrap tooltip attribute.It could get current image id using jquery and popup the message of the current image.If you want to use hotspot,you need to get these images‘ coordinates.

Since you don't post your codes,I create a little demo.

More details,you could refer to below codes:

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <style>

        .img-tooltip {
            ;
        }
    </style>
    <script>
        $(function () {
            $(".img").on('mousemove', function (e) {

                $("#" + $(this).attr("TooltipId")).css({
                    top: e.pageY,
                    left: e.pageX
                });

                $("#" + $(this).attr("TooltipId")).tooltip('show');
                $(".tooltip-inner").css({
                    "background-color": $(this).attr("TooltipBackround")
                });
                var a = ($("#" + $(this).attr("TooltipId")).attr("data-placement") != "") ? $("#" + $(this).attr("TooltipId")).attr("data-placement") : "top";
                $(".tooltip-arrow").css("border-" + a + "-color", $(this).attr("TooltipBackround"));
            })

            $(".img").on('mouseleave', function (e) {
                $("#" + $(this).attr("TooltipId")).tooltip('hide')
            })
        })
    </script>
 
<img class="img" src="image/download.png" tooltipbackround="green" tooltipid="img-tooltip1"  />
        <i id="img-tooltip1" class="img-tooltip" data-toggle="tooltip" data-html="true" data-placement="right" title="Tooltip for image <h1>Faizan</h1>" data-animation="false" data-trigger="manual"></i>

        <img class="img" src="image/download.png" tooltipbackround="blue" tooltipid="img-tooltip2" />
        <i id="img-tooltip2" class="img-tooltip" data-toggle="tooltip" data-html="true" data-placement="right" data-animation="false" data-trigger="manual" title="Tooltip for image <h1>Faizan Anwer</h1>"></i>

        <img class="img" src="image/download.png" tooltipbackround="blue" tooltipid="img-tooltip3" />
        <i id="img-tooltip3" class="img-tooltip" data-toggle="tooltip" data-html="true" data-placement="right" data-animation="false" data-trigger="manual" title="xxxx</h1>"></i>

More details,you could refer to below article:

https://getbootstrap.com/docs/4.0/components/tooltips/

Result:

Best regards,

Yijing Sun

Answer 2

User409696431 posted

Your question has two parts: how to make the hotspots and how to have a popup for each hotspot.

Do you have a tool to make the hotspots (or have the patience to code them by hand), or are you asking for help with that?

As for a popup, the simplest thing to do is add a title attribute to each hotspot.  That just uses the browser's tooltip format, nothing fancy.

In the following example there are two hotspots, one with a link to another page, both with titles that pop up on hover.

<map id="ImgMap0" name="ImgMap0">
	<area alt="" coords="203, 117, 93" href="cat.html" shape="circle" title="Kitten face">
	<area alt="" coords="1, 20, 96, 189" shape="rect" title="Optical illusion paper">
</map>
<img alt="kitten" src="kitten.jpg" usemap="#ImgMap0">