← Mighty Studio · Discover gallery
Interactive Learning Template
SVG Image Map with Popups
By Tim · 489 uses
An SVG image map that learners click to open details for specific regions. Add your SVG and match each region to an element ID. Fill each modal or popover with text, then add an image or audio.
About this template
In the creator's words, from Tim.
Define hotspot regions using shapes or groups in a SVG. You can have hotspots of any shape you like, even in disconnected shapes.
Use ids within SVGs (paths, groups, etc.) as clickable hotspot markers. Add lightbox info boxes or labelled-graphic style popovers when regions are clicked. If you re-edit your SVG, say to move things around, the ids should still match and reposition accordingly.
Fill each region’s popup
For each region, add its SVG ID and learner-facing label. Fill in a popup title and body, with an optional image or audio.
You can hide titles and control how popup images fit. You can also set a different background color for an individual popup.
Start with the matching popup style
Start with Insurance claim for modal boxes. The preset starts with six regions over a car insurance claim scene.
Start with Consent for minimal popovers. It starts with six regions over a consent illustration.
Add or remove regions from either starting point.
Pick another reveal pattern when needed
Use Labeled graphic with accordion when details should open in an accordion. Choose System Demo or Product Walkthrough for a guided tour across software screens.
This template fits when the clickable area must follow a custom SVG shape.
Template by Tim. Notes by the Mighty team. Publishing, SCORM and LMS details that apply to every template are in the Mighty FAQ.