Interactive Image Maker (Clickable Hotspots)

About the Interactive Image Maker (Clickable Hotspots)

Make any picture interactive — a labelled diagram, a map, a floor plan, a product photo, a poster or an infographic. Add hotspots as pins, numbered markers, icons, rectangles or areas you draw point by point; each one shows a tooltip, opens a pop-up card (text, a picture, a sound, a YouTube or Vimeo video, a link), opens a web page or jumps to another scene, so several pictures become a lesson, a product tour or a virtual walk-through, with an optional step-by-step tour.

Positions are stored as percentages, so the result fits any screen, and every hotspot is a real button with its own label for keyboard and screen-reader users. Play it on this page as readers will; with a Pro pass export one self-contained HTML file (every picture inside it), an embed code, a printable PDF with a numbered legend and a SCORM 1.2 package for a learning management system. Without a pass, Play shows the first 5 hotspots working under a watermark. Your pictures never leave your device.

Common uses

• Teachers making labelled diagrams, maps and image-based lessons for an LMS.
• Shops showing the features of a product on one photo.
• Trainers turning floor plans and machine photos into guided walk-throughs.
• Museums, tourism and estate agents adding stories to pictures and plans.

Accessibility

Every hotspot is a button (a link when it opens a web page) named by its label, in tour order, so Tab moves between them and Enter or Space opens one; Esc closes a card and puts the focus back on its hotspot. Cards are labelled by their title, pictures carry the descriptions you write, the pulse stops when the reader’s device asks for less motion, and markers are at least 28 pixels across (36 by default). The page warns about scenes and card pictures without a description and about hotspots without a label — a label is required.

What the exports hold

• HTML file: one page with the player, its styles and every picture and sound inside it (as data addresses), so it works offline and from any web host. Videos play from YouTube’s privacy-enhanced player or Vimeo when the reader is online.
• Embed code: an <iframe> for your own copy of the HTML file, or one block (styles, player and data) to paste into a page that accepts its own HTML and scripts.
• Printable PDF: each scene with numbered markers on the picture and a numbered legend of what every hotspot says, its links and the scenes it opens.
• SCORM 1.2 package: a ZIP with imsmanifest.xml (one SCO) and the HTML page with the SCORM 1.2 run-time calls: it reports incomplete when started, completed when every hotspot has been opened or the tour finished, the session time, and the scene to resume at.

Limitations

• Videos are YouTube or Vimeo addresses; other video sites become a link in the card.
• The HTML file grows with your pictures and sounds: pictures are kept at most 2,560 pixels on their longest side.
• The SCORM package leaves out the optional XML schema files that SCORM’s packaging rules recommend; most learning platforms import it without them, but test it in yours before you publish.
• Corners of a drawn area are reshaped by dragging; to change an area without dragging, draw it again.

Privacy

On this device: nothing is sent

Your pictures, sounds and words are opened and played in your browser and never uploaded. Projects are saved in this browser’s storage as you work (the 12 most recent), and you can save a project file to keep or move one.