HTML imagemaps were one of the first graphical methods used to navigate complex websites, and continue to retain a number of advantages when they are designed well. One significant drawback of the format in the modern era is that traditional imagemaps are not responsive. Thankfully, SVG can be used to replace this limitation, while bringing a host of new opportunities for site design and UI.
This reading list starts from the techniques of replacing standard imagemaps with SVG variants, then moves to more complex examples, with many more to come:
Time: 2 hours
Prerequisites: HTML, CSS, SVG Intro and SVG Shapes. Some familiarity with JavaScript suggested.
SVG as an Alternative To Imagemaps
Create a Responsive Imagemap
Imagemap with Info Popups
Interactive Geographical Map
Interactive Color Photo Highlight Effect
Vector map by Jen Olsen
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
