vanilla-rwdImageMaps
vanilla-rwdImageMaps was written by Luca Kiebel and it is a vanilla JavaScript version of Matt Stow's JQuery jQuery-rwdImageMaps
Here is a simple image map. Change the size of the browser window and click on any of the objects to taken to a web page.
The Code
The complete code for this is:
<script type="text/javascript" src="js/vanilla.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>rwdImageMaps('img[usemap]');</script>