Estimated reading time: 2 minutes, 6 seconds
While traditional imagemaps remain a very effective UI pattern for certain sites – especially those that need a visitor to enter a geographical location, or used in navigation that has a particularly strong visual theme – they bring with them two significant disadvantages that make them ill-suited for modern web development:
- Imagemap hotspots can take a long time to plot out, and are difficult to modify once created.
- Traditional imagemaps cannot be made responsive; while the image can be rescaled, the imagemap coordinates will not, meaning that hotspots will drift out of registration with the underlying image as the picture is resized.
I’ve shown how to recreate simple imagemaps with SVG shapes, but that version did not incorporate bitmaps. As we’ll see, it’s entirely possible to integrate the two formats together.