Quote (MonsieurPorc @ May 29 2020 07:48am)
Hello and thank you for your interest in my question.
With my extremely limited knowledge of JQuery, I tried to recreate the example shown in your first link even though the example failed to do what it was intended to do: display a popup image when the mouse is moved over a "hot spot" coordinate on an image map. Nonetheless, I figured if i could recreate the example successfully, then maybe I could adapt the script to suit my own image map and images.
In Line 1
Code
<div class="sitebox">
"sitebox" is undefined. Either it's a redundant tag or something really is missing that is preventing this example from working.
In Line 8
Code
<img id="image" src="http://images.pictureshunt.com/pics/m/mouse-8557.JPG" />
is a broken link, so I substituted it with my own image.
That having been said, here is what I came up with:
Code
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
/*
http://stackoverflow.com/questions/40497584/imagemap-on-hover-display-image/40526150#40526150
*/
$("area").mousemove(function(e) {
$("#image").attr("src", $(this).data("image")).show().css({
left: e.pageX + 10,
top: e.pageY + 10
});
});
$("area").mouseout(function(e) {
$("#image").hide();
});
</script>
<style>
#image{
position:absolute;
display:none;
}
</style>
</head>
<body>
<div class="sitebox">
<img name="aerialmap" src="http://www.getmapping.com/sites/default/files/styles/post_image/public/quick_media/getmapping_aerialimagery_vertical_hamptoncourt_1_0.jpg?itok=tNmyWk21" usemap="#aerial2" style="border:5px solid #535353;">
<map name="aerial2">
<area shape="poly" coords="531,287,538,321,610,301,601,270" href="#" onclick="return false" title="building 1" data-image="https://placeholdit.imgix.net/~text?txtsize=40&bg=ff9900&txtclr=ffffff&txt=01&w=70&h=70">
<area shape="poly" coords="196,246,240,255,213,384,166,376" href="#" onclick="return false" title="Building 2" data-image="https://placeholdit.imgix.net/~text?txtsize=40&bg=ff0000&txtclr=ffffff&txt=02&w=70&h=70">
</map>
</div>
<img id="image" src="http://theinspirationgallery.com/D2-2020/mysticzon-titans.png" />
</body>
</html>
Which can be seen on my domain:
https://bit.ly/3eyMDRZAs you can see, nothing is working, and I don't possess the coding knowledge to troubleshoot or adapt this script.
I appreciate the time you took to try and help me with my project.