Summary: Add a background image and then add individual pins to create a clickable image containing multiple pieces of information.
What it does
The Hot graphic component adds clickable pins to an image, so learners can click on them and see annotations.
Basic configuration
Here are the fields you'll need to configure when you edit the hot graphic component:
Set completion on: A dropdown menu where you decide what counts as completing the component. Choose between "allitems"(the learner has to click on all the pins in the hot graphic) and "inview"(the learner just has to see the graphic).
| Main hotgraphic: Select the image you want to use as the background of your hot graphic. You can use any image but, as you can see from this picture, it can be useful to create an image that already has room for pins to be added. |
There's a variety of other settings that you can use to customise the appearance and behaviour of your hot graphic. These are all labelled and explained in the menu.
Adding pins to your graphic
Once you've added your graphic, you can start adding pins by clicking Edit Hot Graphic Pins.
You'll see your graphic and can start adding pins to it by clicking Add item.
Your pin will appear and you can click and drag it to position it on your graphic.
Hover over your pin and click Edit to configure it.
Now you'll see various options to fill in:
| Title: The title appears in the popup. | |
| Title level: Sets the ARIA level of the title. This has no effect on the appearance of the title, but changes the priority of the title if a learner is using a screen reader or other accessibility tools. | |
| Body: The text that appears in the body of the popup. | |
| Strapline: The strapline only appears on mobile. | |
| Item Graphic: The image that appears in the popup. | |
| Alternative text: A description of the image; required when it has meaning that must be conveyed to the learner. This has no effect on the appearance of the graphic, but will serve as a description of the image if a learner is using a screen reader or other accessibility tools. | |
| Attribution: | |
| Graphic Classes: Allows you to specify custom CSS classes to be applied to the hotgraphic pin or, alternatively, to the hotspot tile when _useGraphicsAsPins is set to true. | |
| Item Pin: Use this to upload a custom image as your pin. | |
| Item Popup Classes:
Allows you to specify custom CSS classes to be applied to the popup item. Supported classes are 'align-image-left', 'hide-desktop-image', and 'hide-popup-image' which aligns the item image to the left, hides the pop up image in desktop view, and hides the pop up image for all screen sizes respectively.
|
Popup with hide-desktop-image applied |
| Pin Position: These options move the pin using numbers to dictate the position. |
Click OK when you're done. When you've added all your pins, you can click and drag the titles to specify which order they should appear in in the popup window.
Press Done. You've finished configuring your hot graphic component.
Use graphics as pins
If you switch on Use graphics as pins, the images you've added to your popups will replace the main image. They'll appear in a grid and will display the corresponding information when you click on them.