jQuery-rwdImageMaps
jQuery-rwdImageMaps was written by Matt Stow and here is his demo of it. It requires the JQuery library but works well. This is my demo of it.
Several years ago I was asked to create some interactive floor plans on a site that used a Content Management System (CMS). The CMS was pretty restrictive so I had to look for a method that could be accessed through a Content Delivery Network (CDN). The files are available on several CDNs so I used it to produce this.
Here is a simple image map. Change the size of the browser window and click on any of the objects to display a JavaScript message and be taken to a web page.
The Code
The complete code for this is:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.rwdImageMaps.min.js"></script>
<img class="lrg-img-ctr" src="images/desktop-web600.webp" usemap="#image-map" width="988" height="600" alt="">
<map name="image-map">
<area shape="poly" coords="141, 282, 293, 334, 294, 342, 189, 552, 25, 493, 20, 485, 20, 459, 16, 464, 73, 380, 79, 380, 90, 354, 131, 282" alt="notepad" href="https://en.wikipedia.org/wiki/Notebook" target="_blank" rel="noopener noreferrer">
<area shape="poly" coords="305, 13, 728, 13, 738, 26, 719, 282, 734, 555, 723, 569, 567, 565, 292, 554, 313, 281, 294, 23" alt="laptop" href="https://en.wikipedia.org/wiki/Laptop" target="_blank" rel="noopener noreferrer">
<area shape="poly" coords="766, 250, 836, 250, 850, 384, 773, 386" alt="phone" href="https://en.wikipedia.org/wiki/Telephone" target="_blank" rel="noopener noreferrer">
<area shape="poly" coords="920, 446, 933, 476, 921, 532, 860, 562, 781, 532, 773, 481, 787, 432, 849, 405, 912, 435, 957, 434, 963, 440, 958, 448" alt="cup" href="https://en.wikipedia.org/wiki/Coffee" target="_blank" rel="noopener noreferrer">
</map>
<script>$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
$('area').on('click', function() {
alert($(this).attr('alt') + ' clicked');
});
});
</script>