Hotspot Overview

Relevant to: faculty and staff

This article contains information considered accurate at the time of publishing. Technology updates, changes in University security practices, and/or policies and procedures may affect the information in this article - updates to articles are scheduled on a periodic basis and will address any required changes.

Creator+ Hotspot Overview

Elements from Brightspace’s Creator+ tool allow developers and content creators to add dynamic components with a user-friendly authoring experience that does not require HTML coding knowledge.

Hotspots provide a multilayer learning experience enriched with multimedia and interactive components that promote exploration, analysis, and evaluation. Learners can select and open active icons to learn more about the parts of an image. An invisible grid overlay allows the image to be fully accessible with the integration of micro alt tags.

Insert a Hotspot

To insert a Hotspot to a page of content, navigate to the desired page and select the Edit HTML option to edit the page. Complete the following steps:

1. Place the cursor in the location where you want to place the Hotspot image.
2. Select the Creator+ Authoring Tools button in the editor.
   


3. Select the Insert Element option.
   


4. Click the Hotspot option.
   


5. You may choose to keep the default Learner Instructions or add custom instructions.
   


6. Click the Add Image button and select an image from your device. Enter the alt text in the Alternative Text field.
7. Click the Save button.
   


8. Click anywhere on the image to place a Hotspot marker. The interface to build content associated with the Hotspot will appear to the right of the image.
   
   • Please Note: Each Hotspot is labeled in the order in which you place the marker.
9. You can rename the Hotspot.
   
   • Please Note: Hotspot names are used for editing and for screen reader users.
10. In the Hotspot Content field, use the full HTML editor to add a description or more information, additional images, videos, and links to additional resources.
    


11. Click the Hotspot Marker to change the icon and color of a Hotspot maker.
    
    • Please Note: When selecting the Hotspot marker color, please ensure that minimum contrast standards are met to ensure the marker is visible within the image.
12. Select Hotspots to return to the selection screen. Repeat steps 8–11 for each additional Hotspot.
    


13. Below Learner Instructions, click Accessibility and select one of the following:
    • Accessible Hotspots Only: Add a micro alt tag for each Hotspot. Use this when position or context is not critical.
    • Fully Accessible Image: Split the image into a grid and add a micro alt tag for each cell. Use this when image context is critical.
    


14. Add Micro Alt Tags based on your accessibility selection.
15. Select the Save and Insert button to add the Hotspot to the content.
    

Edit a Hotspot Element

1. Navigate to the webpage with a Hotspot and select Edit HTML from the dropdown menu.
   


2. Click the Hotspot to open the Edit Panel, then select the pencil icon.
   


3. Make needed changes and select Preview to review.
   


4. Select Insert when revisions are confirmed.
   


5. Select Save and Close to finalize your update.