Image-map
image-map was written by Travis Clarke. Different versions are available for use with or without JQuery. I decided to go with the vanilla JavaScript version.
Here is a simple image map created with the code. Change the size of the browser window and click on any of the objects to taken to a web page.
The Code
The edited code from what the site made for this is:
<script src="js/image-map-min.js"></script>
<img class="lrg-img-ctr" src="images/desktop-web600.webp" id="map-image" style="width: 988px; max-width: 100%; height: auto;" alt="" usemap="#map" />
<map name="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" href="https://en.wikipedia.org/wiki/Notebook" target="_blank" alt="notepad" />
<area shape="poly" coords="305, 13, 728, 13, 738, 26, 719, 282, 734, 555, 723, 569, 567, 565, 295, 565, 313, 281, 294, 23" href="https://en.wikipedia.org/wiki/Laptop" target="_blank" alt="laptop" />
<area shape="poly" coords="766, 250, 836, 250, 850, 384, 773, 386" href="https://en.wikipedia.org/wiki/Telephone" target="_blank" alt="phone" />
<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" href="https://en.wikipedia.org/wiki/Coffee" target="_blank" alt="cup" />
</map>
<script>ImageMap('img[usemap]')</script>