Introduction
image maps were introduced in HTML 3.2 which was released in May 1996. They allow user interation with an image by mapping a set of coordinates to an image. These areas can be defined as a rectangle, circle, or irregularly shaped polygon.
What started me thinking about image maps was a question on Reddit, How do I make a button look like its part of a image
The information on this page has been tested using Chrome (135.0.7049.41), Edge (134.0.3124.93), Firefox (137.0), and Opera (117.0.5408.163).
Simple image Maps
Here is a simple image map. Click on any of the objects to be taken to a webpage.
The above image map works great, on my laptop at least, but on smaller screens because the image is responsive and shrinks to fit the screen and the coordinates are in pixels, the coordinates no longer relate to the display size of the image.
The entire code for the above image map is:
<img class="lrg-img-ctr" src="images/desktop-web600.webp" usemap="#basic" width="988" height="600" alt="desktop image map"> <map name="basic"> <area class="areapoint" 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 class="areapoint" 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 class="areapoint" 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 class="areapoint" 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>
So what are the alternatives? One method would be to make the image smaller and map the coordinates to that. My site can be seen on smart phones, so the image would have to be tiny.
Responsive image Maps
Luckily, several people have written JavaScript or JavaScript framwork based utilities to make image maps responsive. How they work is by taking the coordinate points and where they appear on the original image. They then calculate the point coordinates on the resized image.
1) jQuery-rwdImageMaps
jQuery-rwdImageMaps was written by Matt Stow and here is his demo of it. It requires the JQuery library but works well. Here 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.
2) 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 my demo of it.
3) 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 and here is my demo of it.
Image Map Generators
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 my demo of it.
There are several good static image generators around. These do not supply the code to make it responsive, but that can be done later. Among the good ones are the ones at fla-shop.com, and image-map.net.
Percentages
Rather than messing around with coordinates and the calculations for when the image size changes, why can't percentages be used? The answer is simple - it doesn't work! John Urban wrote Dynamically Rescaling an Image Map (Internet Archive) to see what browsers would do if percentages were used. The code does not work on any of the browsers I tried it with.
SVG Image Maps
The SVG format and Inkscape program are meant for vector images, but I want to use them to show any image can be used in them have links added to them.
I used GIMP to isolate the various parts of the original image I used, and saved them as png files. I created a new document in Inkscape the same size as the original jpg file I am using the File > Document Properties menus. I then inported the original jpg file as well as the png files. Using the jpg image as a guide, I resized and positioned the png images then deleted the jpg image and saved the new svg file.
SVG files can have links added to any of its objects, and in Inkscape this can be done by right clicking on them and choosing Create Link from the menu. The problem with doing this with bitmaps is that they are rectangular and so the links are applied to the entire area.
Linking bitmaps in Inkscape. The links are applied to the dotted areas, not just the image part of the bitmap
Sources & Resources
<area>: The Image Map Area element - MDN Web Docs
<map>: The Image Map element - MDN Web Docs
GIMP
HTML Image Maps - W3Schools
Image map - Wikipedia
image-map (Travis Clarke)
Inkscape
jQuery RWD Image Maps - Github (Matt Stow)
jQuery RWD Image Maps Demo - Matt Stow
jQuery RWD Image Maps - An old live site - Internet Archive
Responsive Image Map Creator - An online image map creator
Vanilla RWD Image Maps - GitHub (Luca Kiebel)