Skip to main content
All CollectionsContent Items
Adding Hotspot on Image
Adding Hotspot on Image

Hotspots are points or areas on the image that pop up as a small window containing text and/or images after being clicked.

Olga avatar
Written by Olga
Updated over a week ago

Easygenerator helps you bring a common static image to life by making it clickable.
Hotspots explain complex ideas combined on a single image in a much more effective way than a typical text block.

Use cases

You can use hotspots on an image in order to:

  • add tooltips, links, additional images, hints, or explanations

  • identify/label different components on product images

  • contextualize data in graphs or charts

  • create software simulations

  • enhance screenshots of the interface

  • build simple click-and-reveal interactions by adding hotspots on an image with icons

  • replace a bulleted list

  • create interactive maps or virtual tours

How to create hotspots on an image

  1. Add a new content item and choose the Interactive layout > Hotspot on Image.

  2. Click on “Choose background image” to upload an image. Now you can upload an image from your computer, from your Library, choose from the stock library, or add via a link.

  3. Upload a background image (the recommended width is 880 px; max size is 10 MB).

  4. Click on the image and drag the selection to create a hotspot. Add some text, an additional image, or links that will be displayed to your learners when they click on the hotspot and click on Done to save the changes.

    Note: You can format your text within the hotspot using the toolbar to make it bold, italic, underline, adjust its color, and font size, insert links, and change the alignment.

    To insert an image, click on the +Add image button, upload your own either from your laptop, your Library, the stock library, or via a link, then resize, crop, and position the image at the top or bottom, alongside your text and click on Done once you're satisfied with the outcome.

  5. Click on the hotspot and drag the corner of the selected area to resize it.

  6. Select the hotspot and click on the Delete icon to remove it if needed.

Important:

  • You can only add one image within a Hotspot.

  • The images added to the Hotspots will be automatically saved to your Library.

Did this answer your question?