# Image Hotspots (H5P.ImageHotspots)

A picture with spots that open text, a picture, audio or video when clicked: a labelled diagram, a map to explore. Not scored.

- `image` is the picture; `backgroundImageAltText` describes it.
- Each item of `hotspots` sits at `position.x` and `position.y`, in percent of the picture's width and height from its top left. Look at the picture to place them; the preview shows where they landed.
- A hotspot's `content` is a list of sub-content: H5P.Text, H5P.Image, H5P.Audio or H5P.Video. `header` titles its popup.

## Example

```json
{
  "type": "H5P.ImageHotspots",
  "params": {
    "image": { "path": "delta.png" },
    "backgroundImageAltText": "A river delta seen from above",
    "hotspots": [
      { "position": { "x": 30, "y": 40 }, "header": "Main channel", "content": [{ "library": "H5P.Text", "params": { "text": "Most of the water flows here." } }] },
      { "position": { "x": 70, "y": 65 }, "header": "Mouth", "content": [{ "library": "H5P.Text", "params": { "text": "Here the river meets the sea." } }] }
    ]
  }
}
```

<!-- Generated by `h5p-author schema --markdown` from the pinned pack. Do not edit by hand. -->

## Fields of H5P.ImageHotspots 1.11

The example is `type` and `params` alone, and `params` holds the fields below. A source also names its own `title`, `language`, `license` and `authors`, all four required: the build refuses a source that leaves out any of them. The author's name and the licence are the user's: ask for what they have not given. For a name they skip, write the one you know them by, or "Unknown"; for a licence they skip, `U`.

- `image` image file, required — Background image
- `backgroundImageAltText` text — Alternative text for background image: If the browser can't load the image this text will be displayed instead. Also used by assistive technologies.
- `globalIconType` one of "icon" | "image" | "numbers" = "icon" — Global hotspot Icon
- `globalIcon` one of "plus" | "minus" | "times" | "check" | "question" | "info" | "exclamation" = "plus"; only when globalIconType is "icon" — Predefined icon: Using a predefined icon for the hotspots.
- `globalIconImage` image file; only when globalIconType is "image" — Uploaded image
- `globalColor` text = "#981d99"; only when globalIconType is "icon" or "numbers" — Hotspot color: The color of the hotspots
- `hotspots` list 1+ of, required — Hotspots
  - `position` group — Hotspot position
    - `x` number, required
    - `y` number, required
    - `legacyPositioning` boolean
  - `hotspotIconType` one of "default" | "icon" | "image" = "default" — Custom hotspot icon
  - `hotspotIcon` one of "plus" | "minus" | "times" | "check" | "question" | "info" | "exclamation" = "plus"; only when hotspotIconType is "icon" — Predefined icon: Using a predefined icon for the hotspot.
  - `hotspotIconImage` image file; only when hotspotIconType is "image" — Uploaded image
  - `hotspotColor` text = "#981d99"; only when hotspotIconType is "icon" — Hotspot color: The color of the hotspot
  - `alwaysFullscreen` boolean — Cover entire background image
  - `header` text — Header: Optional header for the popup. This is used by assistive technologies.
  - `content` list of sub-content: H5P.Text | H5P.Video | H5P.Image | H5P.Audio, required — Popup content

3 interface texts are left out: they come from the libraries' translations. `h5p-author schema H5P.ImageHotspots --all` lists them, for a source to set one.

<!-- End of the generated section. -->