connector_hotspotimageconnector_page
Table of Contents
Connectors > Hotspot Image Connector
This page presents an image marked up with hotspots. The hotspots can be configured to provide a range of responses when a learner clicks on them: display a text or image; present a video or audio for the learner to play; display an embedded external webpage; take the learner to another page in the project or to an external webpage.
The Hotspot Image page in Interactivity can provide similar functionality, but most of the response options have to be added through the Text editor for each hotspot.
Example demo
or view at Xerte Page Types > Connectors: Hotspot Image Connector (opens in new tab).
Editor Interface
Top level: Core Properties
| Property | Description | Type | Additional information |
|---|---|---|---|
| Page Title | Text that appears in header of published page | Text | |
| Page Text | Content that appears at the top of the page | Text+ (Toolbar) | Use this to give the context or instructions for the task. Other content (e.g. images, audio, video) can be embedded here. |
| Align Text | Puts all the text in either the left or right panel {Left/Right} | Drop-down | |
| Highlight Hotspots | Displays all the hotspots when the learner lands on the page | Tick box | If this box is unchecked, the highlights only appear, one by one, on mouseover. |
| Image: File | Adds the image (through XOT Media Browser) | Link to Media Browser | Click on the upload icon, import the image into Media Browser, and click on the thumbnail to add here. |
| Image: Size | {Small/Medium/Large/Full} | Drop-down | |
| Image: Description | Adds a description for accessibility | Text | |
Top Level: Optional Properties
Page Specific
| Property | Description | Type | Additional information |
|---|---|---|---|
| Dialog position: Vertical | The vertical position of the dialog box that appears when the learner clicks on the hotspot {Top/Middle/Bottom} | Drop-down | Default - “Next” |
| Dialog position: Horizontal | The horizontal position of the dialog box that appears when the learner clicks on the hotspot {Left/Centre/Right} | Drop-down | |
| Hotspot Highlight Appearance: Stroke colour | The colour of the edges of the hotspot. This appears only on mouseover, unless the Highlight Hotspots box has been checked.. | Colour picker | |
| Hotspot Highlight Appearance: Stroke opacity | The opacity (a decimal number between 0 and 1) of the edges of the hotspot. | Number | |
| Hotspot Highlight Appearance: Stroke width | Width of the edges of the hotspot | Number | |
| Hotspot Highlight Appearance: Fill hotspot | If selected the hotspot remains filled with colour until the next hotspot is selected. | Tick box | |
| Hotspot Highlight Appearance: Fill colour | The colour of the fill | Colour picker | |
| Hotspot Highlight Appearance: Fill opacity | The opacity (a decimal number between 0 and 1) of the fill. | Number | |
| Hotspot Highlight Appearance: Show tooltip | If selected, a tooltip appears on mouseover of a hotspot. The text in the tooltip is the Title of that hotspot. | Tick box |
General
See General Optional Properties.
After you have created the settings and added the image, go to New Hotspot .
Hotspot: Core Properties
| Property | Description | Type | Additional information |
|---|---|---|---|
| Title | A label or title that appears above the text associated with a hotspot | Text | |
| Edit Hotspot | Add and change the shape of the hotspot here | Hotspot editor | |
| Show Title | A title that displays at the top of the Dialog box. | Tick box | Note that this property only appears if you select Text, Image, Sound, or Video from Optional Properties. |
| Display in | {Dialog/Lightbox} Dialog displays as a pop-up that can be dragged around the screen. Lightbox places the text/image/audio player in the centre of the screen and greys out other content until the Lightbox is closed. | Drop- down | Note that this property only appears if you select Text, Image or Sound from Optional Properties. |
Hot Spot: Optional Properties
Page-specific
These enable you to determine the type of response to clicking on the hotspot.
| Property | Description | Type | Additional information |
|---|---|---|---|
| Destination Page | This is for an internal link. Choose the page in the Xerte project to which the selection of this answer will take the learner. You have a choice of first or last page in the project, the next page, previous page, or any other specific page in the project. | Drop-down | |
| External Destination Page | Takes the learner to an external webpage. | Text | The browser navigates away from this project. Choose New window… instead, if you want the external webpage and the Xerte project to be visible at the same time, e.g. on dual monitors. |
| iframe | This embeds external content within the Xerte dialog or lightbox | Number | Refer to iframe in the glossary for more information on how iframes work |
| Image: File | Upload the image here, through the Media Browser | Link to Media Browser | |
| Image: Description | Enter a Description for Accessibility | Text | |
| New window: URL | Add the URL if you want an external webpage to open in a new window | URL | The HTML box (see below) must be blank when using this option. |
| New window: HTML | As an alternative to a link to an external webpage, you can add HTML content here. | Text+ (Toolbar) | |
| New window: Width | Sets the width of the new window, in pixels | Number | |
| New window: Height | Sets the height of the new window, in pixels | Number | |
| Sound: File | Upload an audio file (MP3) here, through Media Browser | Link to Media Browser | |
| Sound: Auto-Play | {Audio Player/Auto-Play} Audio Player allows the learner to play, pause, navigate and adjust volume; Auto-Play automatically starts and stops the audio | Drop-down | |
| Sound: Start Time | If you only want to play a segment of the imported audio, set the start time (in seconds) here. | Number | This Optional Property only becomes visible in the Optional Properties pane, if you select Sound… from the Optional Properties |
| Sound: End Time | If you only want to play a segment of the imported audio, set the end time (in seconds) here. | Number | This Optional Property only becomes visible in the Optional Properties pane, if you select Sound… from the Optional Properties |
| Text | Text (and/or other content) that is displayed in the dialog or lightbox | Text+ (Toolbar) | |
| Tooltip Description | Text that appears on mouseover of the hotspot | Text | This text cannot be formatted |
| Video: File | Upload a video file here, through Media Browser | Link to Media Browser | |
| Video: Description | Add a description for accessibility here | Text |
connector_hotspotimageconnector_page.txt · Last modified: 2023/09/25 09:19 by jsmith