ImageHotspots

H5P equivalent

H5P Image Hotspots

When to use

Use ImageHotspots when learners explore regions of an image — floor plans, equipment diagrams, or UI callouts. Each hotspot opens associated content.

Requirements

  • x and y are percentages (0–100) from the top-left of the image.

  • Provide meaningful label text for buttons.

Try it

Documentation demo

Use the Live demo, React, AI prompt, and Packaging / Manifest tabs below. Embedded demos disable telemetry, xAPI, and the LMS bridge. For production delivery, use the CLI template src/courseConfig.ts and LMS Go-Live.

Open demo in full tab 

<ImageHotspots
  blockId="floor-hotspots"
  src="/floor-plan.svg"
  alt="Office floor plan"
  hotspots={[
    { id: "exit", label: "Emergency exit", x: 80, y: 20, content: <Text>Keep aisles clear.</Text> },
    { id: "desk", label: "Workstation", x: 40, y: 50, content: <Text>Lock your screen when away.</Text> },
  ]}
/>

Copy into Cursor, Copilot, or ChatGPT after the vibe coding starter context:

Read lessonkit.json and src/App.tsx before editing.

Add a ImageHotspots block (H5P-style: Image Hotspots) like this example inside the active <Lesson>:

<ImageHotspots
  blockId="floor-hotspots"
  src="/floor-plan.svg"
  alt="Office floor plan"
  hotspots={[
    { id: "exit", label: "Emergency exit", x: 80, y: 20, content: <Text>Keep aisles clear.</Text> },
    { id: "desk", label: "Workstation", x: 40, y: 50, content: <Text>Lock your screen when away.</Text> },
  ]}
/>

Requirements:
- Import only from @lessonkit/react; use block types from block-catalog.v3.json.
- Keep existing courseId, lessonId, and navigation stable unless I ask to add a lesson.
- After edits, list changed files and what to verify in the browser (lessonkit dev).

Workflow tips: https://lessonkit.readthedocs.io/en/latest/guides/vibe-coding/prompting-and-workflows.html

See also