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

pagetype, connector

Xerte Community Documentation

Table of Contents