How do I create an image with interactive hotspots?

You can add interactivity to an image through the use of image Hotspots. For example, you may have a map you want learners to explore, or a product diagram, or a software screenshot. This tool allows you to use more complex hotspot shapes, including circles and polygons, that are not available with the hotspot Widget found on the Insert tab. It also binds the hotspots to the image, so if the image moves, hotspots remain grouped in place..

To add interactivity to an image on your page:

  1. Select the image on which you want to add interactive hotspots.
  2. Select the Hotspots button on the Interaction or Image Tools tab.
  3. Use the Circle, Rectangle, or Polygon tool to select the part of the image to add the action on.
    Note: You can re-size the selection area later, if required.
  4. Once you’ve finished your shape, click a button to add a URL or Mouse Event. Enter information for the title and Alt text as you make your links. This will make it easier to identify and arrange them.
  5. For the Mouse Event, choose a Show and Hide trigger and effect. In the Elements list, select the target elements. Use Ctrl-click (or Command-click on the Mac) to select multiple elements. Select hide options below and click OK.
  6. You can edit and arrange your links on your image map using the tools on the left side of the window.
  7. Click the OK button when you’re done or click Cancel at anytime.

Note: To use the Hotspot Polygon tool, click a spot on your image to “start” the polygon shape. A small circle appears. Click the next spot on your image. A line appears connecting the circle to your current position. Continue clicking around the image area until you have almost completed enclosing the shape. Finally, click the circle again to close the shape.

Interactivity and Animation

  1. How do I add interactions or interactivity to my page? Add links, actions, timed events, animations, hotspots, and image maps.
  2. How do I insert a Hotspot to add interactions?
  3. How do I add an action to an element that when trigger will Show or Hide or Toggle other elements (mouse event interaction)?
  4. Insert or add a pre-built button to a page (and edit it)
  5. How do I add an Action to Animate elements?
  6. How do I add a Swap Content Action to an element?
  7. How do I add a Light Box Action to an element?
  8. How do I insert a Text Input box on a page that learners can enter text into?
  9. How do I add an Action for Player Controls (Course Player navigation buttons: e.g., Forward, Back, Audio, Transcript buttons)?
  10. Media event actions and interaction (sync or time events to audio and video)
  11. What are the Animate Effects I can apply to element interactions or page actions?
  12. Adding a Link to URL using a modal target does not work for some sites (produces empty box)
  13. How do I add a link or hyperlink to a URL website, email or ftp site?
  14. How do I add a drag and drop interaction to my content page?
  15. How do I create an image with interactive hotspots?
  16. How do I allow the user to print a course page?
  17. How do I edit or remove an Action from an element on my page?
  18. How do I edit, delete, or remove Hotspots (Image Map) from an element?
  19. How do I get audio to play when a Hotspot or Action is triggered?
  20. How do I hide all mouse event targets on the stage? Hide Targets feature
  21. How do I make "hidden" hotspots? How do I hide the pointer hand cursor on a button?
  22. How do I make a page link to another page? How do I make branching interactions?
  23. Page, Jump, and Endscreen Transitions for a course (and Default Effect)
  24. Add an Entrance Effect to elements on a page
  25. How to Disable and Enable the Menu Button
  26. How do I add, edit and remove Actions within text elements?
  27. How do I add, edit and remove Links within text elements?
  28. Can learners search a course for specific content?
  29. What data does the course player search against during a course search?
  30. How do I display variables in my course?
  31. How do I make form fields available as variables?
  32. How do I set a custom variable?
  33. What are some of the Variables available?

Feedback and Knowledge Base