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
- 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.