Responsive Image Map Creator
Most of the image map generators I found can only use rectangles as hotspots, but one, Responsive Image Map Creator, stood out from the others. At first I thought it was not going to work as I use webp images on the site which the generator will not accept. What I did was create a jpg file from the webp image and use that in the genrator then once the code was produced, changed it to the webp file.
I have already got the <map> code so uploaded that to the site, clicked OK, then clickd on the "to html" button. The program is essy to use, has planty of help, and the resulting code is easily edited.
The JQuery code is linked to ajax.googleapis.com but as I already had a minified JQuery file, I changed the code to use that. It also uses imageMapResizer.min.js which is available from their site.
Responsive Image Map Creator editing page
Here is a simple image map created from the site. 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/jquery.min.js"></script>
<script src="js/imageMapResizer.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>$(document).ready(function(e){$("map").imageMapResize();});</script>