Hot Graphic Component

This component is NOT recommended for use when creating accessible courses.

The Hot Graphic component lets you display an image with clickable hotspots on. The Hot Graphic component allows the learner to interact with the component to get additional information about the topic.

This article provides an overview of the Hot Graphic component, component setup and behavior, and examples of Hot Graphic component configurations.

Component overview

The Hot Graphic component is an interactive component that lets the learner click on hot spots displayed on an image to reveal more information. The Hot Graphic component is flexible and lets you select to build in icons, text, or numbers for your component hot spots. The Hot Graphic item can contain only text or text and media.

The Hot Graphic component is fully responsive and can be set to be displayed as a left, full-width, or right positioned component in your Evolve course.

Component set up

To add this component, follow the steps in this article:

The Property Panel for the newly added component will then open automatically for you to customize set-up.

Or click anywhere on an existing component to open the Property Panel.

General section

Add Title, or a Display Title, as needed. Display Title is seen by learners.

Add your Body. Use the text editor to style and format your text, as needed.

1. Add Instruction Text that tells users how to use the component.
2. Add Instruction text for mobile devices.

Note: The Instruction text for mobile devices will not be used if the Desktop Layout for Mobile behavior is enabled.

Include an Aria Label for screen readers, as needed.

Add Next Button ARIA Label and Previous Button ARIA Label, as needed. This setting is used if the Hot Graphic popup is shown as a carousel.

Enter the text to be displayed as the Popup Close Button Text.

Interaction Label section

In the Interaction Label section, you can enable an Interaction Label.

The Interaction Label allows you to add a widget before or after the Hot Graphic component. This widget can display an icon and label prior to the Hot Graphic component completion, which changes to a different icon and label once the Hot Graphic component is completed.

Behavior section

In the Behavior section, toggle to enable Set Desktop Layout for Mobile.

Toggle to Use Mobile Hotspot Positions to allow hotspot items to be repositioned on mobile.

Toggle to enable Hide Interaction Label on Mobile.

Toggle Has Scrollable Image to allow the Hot Graphic image to scroll through touch and drag.

Enable Show Popup as carousel to display all the items on the Hot Graphic component as a carousel in the popup.

Toggle Tooltip Items as needed.

Enable Display Item Inline to show the selected item inline above the Hot Graphic component image.

Appearance section

1. In the Appearance section, you set Hotspot Icon.
2. Set Visited Hotspot Icon to be displayed for visited hotspots.

Note: Hotspot Icon and Visited Hotspot Icon can be overridden in each Hot Graphic component Item.

You can select Use Hotspot Colors instead of using the default setting that is set to Use Theme Colors.

Set Text Hotspot Styles and Mobile Text Hotspot Styles, as needed.

Note: Text Hotspot Styles and Mobile Text Hotspot Styles can be overridden in each Hot Graphic component Item.

Animations section

In the Animations section, toggle to display Hotspot Pulse Animation for hotspots that have not been visited.

Note: The Hotspot Pulse Animation is only available for icon or number hotspots.

Toggle Slide Items to allow animation on the next item when using Carousel popup.

Select to enable Fade in Item, Scale in Item and set Easing style as needed.

Note: The animations Fade in Item, Scale in Item, and Easing are only available for Hot Graphic component Items using Carousel popup.

Add Images & Hot Graphic Items

Images section

1. In the Images section, you select a Desktop Image to display on desktop-sized screens.
2. Add Image Alt Text, as needed.
3. Select a Mobile Image that will display on mobile sized screens.
4. Add Mobile Image Alt Text, as needed.

Scroll down and toggle to Enable Graphic Text. This will allow you to place text on the Hot Graphic Image. Add Graphic Text and use the text editor to style and format your text, as needed.

Set Graphic Text Layout and adjust other optional settings for your Graphic Text as needed.

Items section

In the Items section, you add Hotgraphic Items to your Hot Graphic.

Add a new Hotgraphic Item.

Add Hotspot Title and Hotspot Body. Use the text editor to style and format your text, as needed.

1. Drag the blue + icon to set positions for Hotspot position and Mobile Hotspot positions.
2. Select Hotspot Type. The options are Icon, Text, or Item Number. By default, this is set to Icon.

Note: You must add Desktop and Mobile Images in the Images section before you can set their Hotspot positions.

1. As needed, click the blue buttons to select icon for Hotspot Icon and Visited Hotspot Icon.
2. Add Hotspot ARIA Label and Hotspot Completed ARIA Label as needed.

Select Media Type to be displayed for the Hotgraphic Item. Media Type options are Image, Video, Gif, and Audio. Depending on the selected Media Type, select your media and settings for the Hot Graphic Item.

Finally, select Hotspot Image Layout. This option allows you to select the position of the media relative to the text inside the popup. By default, this is set to position Right.

Add, Duplicate, and Delete Hotgraphic Items as needed.

Component Examples

The Hot Graphic component gives you a lot of flexibility. Below are examples that illustrate different Hot Graphic component setups:

Example 1 – displays Hot Graphic component with individual set hotspots on the image. This example illustrates hotspots with icons, numbers, and text settings. In this example the text hotspot (Item 3) has been configured to display as a button.

Example 2 – displays a Hot Graphic Item displayed as Carousel.

Example 3 – shows an example of a Hot Graphic component popup.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.