====== 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 =====

''{{url>https://xot.xerte.org.uk/xapi_launch.php?template_id=116&group=xertepagetypes#hotspotimageconnector}}''

or view at [[https://xot.xerte.org.uk/xapi_launch.php?template_id=116&group=xertepagetypes#hotspotimageconnector|Xerte Page Types > Connectors: Hotspot Image Connector]] (opens in new tab).

===== Editor Interface =====

{{:xerte-connect-hotspotimage-editor.jpg?600|:playground:xerte-connect-hotspotimage-editor.jpg}}\\

==== 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[[:optional_properties| General Optional Properties]].

After you have created the settings and added the image, go to **New Hotspot **.

{{ :xerte-connect-hotspotimage-newhotspot.jpg?400 |:playground:hotspot_image_add_hotspot.jpg}}\\

==== 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|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 |   |

{{tag>pagetype connector}}