← Mighty Studio · Discover gallery
Interactive Learning Template
Labeled graphic with accordion -Authoring Template
By Leesh · 577 uses
Labeled image hotspots that learners open to read more about parts of an image. You add the main image and marker positions. Each hotspot gets a label, body text and media.
About this template
In the creator's words, from Leesh.
A labelled graphic with an accordion fully editable. I have also added a preset for full image labelled graphic.
You will need the Labelled Graphic (Cross Hair) template to gather the coordinates for your hotspots. Once you have these simply add into this template for precision.
If you need any amends please message me.
Markers sit on the image
Learners see a heading, an image and clickable markers. In the accordion preset, the labels sit in a collapsed list beside the image.
Opening a label reveals the explanation for that hotspot.
Two presets start from the same NICU example
Both presets use the same NICU baby starting example and start with four hotspots. Authors can add or remove hotspots.
Pick Labeled Graphic Accordion when you want a panel list next to the image. Pick Labeled Graphic Cards when you want a full image layout with cards instead.
The Cards preset also includes an audio file and card layout controls.
Shaped areas need a different image template
Pick SVG Image Map with Popups when each clickable area needs a custom shape. It uses SVG shapes or groups for the regions.
Pick System Demo or Product Walkthrough for a guided software or system tour. It adds hotspot callouts to each screen.
Questions people ask
- How do I place the hotspots accurately?
- Use the Labelled Graphic (Cross Hair) template to gather the coordinates. Then add those coordinates to this template.
- Can I add audio to a hotspot?
- Yes. Each hotspot can include audio. The Cards preset ships with an audio example.
- Can I add more than four hotspots?
- Yes. Both presets start with four hotspots. Authors can add or remove hotspots.
Template by Leesh. Notes by the Mighty team. Publishing, SCORM and LMS details that apply to every template are in the Mighty FAQ.