Hotspots.
Hotspots are clickable points on an image. They turn a static visual into something to explore — useful when the learner needs to discover what's in a scene, a diagram, or an interface.
Exploratory learning on an image.
Hotspots invite the learner to look. They turn passive viewing into active discovery — and they let one image carry several pieces of related content without crowding the page.
- Office or workspace inductions — "meet the spaces."
- Equipment training — "what are the parts of this machine."
- Process diagrams where each node has a tooltip's worth of detail.
- Screenshots of a software interface — "find the menu."
Linear, must-read content.
Hotspots are optional by default — the learner can skip them. If every learner must read every point, use blocks of content, not hotspots. Don't hide required content behind clicks.
- Compliance content that must be acknowledged.
- Anywhere learners might miss content that the assessment relies on.
- Plain text without a visual context — hotspots need an image to anchor them.
- Small mobile screens where hotspot dots are hard to tap.
Try it.
An office induction scene with five hotspots. Click any of the numbered dots to see more about each part of the office. This pattern is one of the most reliable interactions in induction eLearning.
Click any of the numbered dots above to learn more about that part of the office.
The markers pulse subtly to invite the click — a small but important affordance. Without it, learners often don't realise an image is interactive.
Get the visuals right.
Signal that the image is interactive
Hotspot dots should look like dots, not like part of the image. A pulse animation, an outline, a numbered badge — anything that says "click me." Without an affordance, hotspots vanish into the background and never get used.
Generous tap targets
Hotspot markers should be at least 32px in their interactive area on touch screens. The visible dot can be smaller, but the click zone shouldn't be. Tiny dots that miss the tap are deeply frustrating.
Hover and focus states
The marker should grow, change colour, or show a tooltip preview on hover. Keyboard focus needs an equally visible ring. Most hotspot implementations forget the focus state — make sure yours doesn't.
Accessibility — keyboard reachable
Each hotspot should be focusable in source order, activatable with Enter or Space, and have a meaningful aria-label. Without keyboard support, hotspots exclude a significant slice of your audience by default.
Accessibility — alternative content
The information behind the hotspots should be available in another form for screen reader users — typically a text-only list of the same content below the image. Don't trap content behind a visual-only interaction.
Numbering or order
If there's a natural sequence, number the hotspots. If exploration is the point, leave them unnumbered. Numbering signals "you should look at them in order" — choose deliberately.
How to use hotspots well.
Don't hide important content.
Hotspots are optional. Learners will skip them, especially on long modules. Anything that's actually required has to live in a regular block, not behind a click. Use hotspots for enrichment, not for "did they read it."
5 to 8 hotspots is the sweet spot.
Three is barely worth the setup. Twelve overwhelms the image and turns it into a wall of dots. Five to eight gives the learner enough to explore without feeling exhausted.
The image has to be worth the dots.
If your "image" is a photo of a hallway and the hotspots add no information about what learners are looking at, the format isn't earning its place. Hotspots work when the visual itself contains the lesson — an office, a workspace, an interface, a diagram.
Keep the captions short.
A hotspot caption should be 1-3 sentences. Anything longer breaks the rhythm of exploration — the learner clicks the next dot and finds themselves reading a paragraph. Save longer content for a regular block underneath the hotspot image.
Track which hotspots have been opened.
A small visual signal — a checkmark, a colour change — tells the learner "you've seen this one." Helpful for completionists, and means a "you've seen X of Y" indicator can show progress without forcing a sequence.
Avoid hotspots on phones for complex images.
Hotspots work great on desktop and tablet. On a small phone screen, dots end up too close together and tap targets overlap. Either redesign the image for mobile, simplify to fewer hotspots, or fall back to a list view below a certain width.
Decide whether to gate progress.
Some courses block "Next" until every hotspot has been clicked. Some don't. The right answer depends on the content: if hotspots contain essential information, gate; if they're enrichment, don't. Whatever you pick, be consistent across the course — don't switch the rule mid-module.
When you'd reach for hotspots.
Office or workplace inductions
"Meet your new workplace." A floor plan or photo with hotspots covering the main spaces, key people, and where to find essentials.
Equipment and machinery training
"What are the parts of this machine and what does each do." Especially useful for new operators or for refresher training before a hands-on session.
Hazard identification
WHS modules where the learner finds the hazards in a workplace photo. A great combination of hotspots with feedback — but design carefully, because this version does grade.
Software interface walkthroughs
A screenshot of a tool, with hotspots covering key buttons, menus, and panels. Pairs well with embedded video walkthroughs in the same module.
We build hotspot
interactions weekly.
Hotspots are a regular feature in our induction and equipment training work. Three-week delivery, transparent pricing, zero drama.