Storyline 1: Adding Hotspots

Article Last Updated

This article applies to:

Hotspots are interactive shapes you can use in place of buttons when no visible fill or outline is needed.  Hotspots are invisible objects that work like buttons, only without any visible states.  In fact, hotspots don’t have states or the option to add or edit states.

Hotspots are especially useful when you want to provide hover triggers and on-click triggers that perform an action, such as displaying additional information or navigating to another slide.  Hotspots are also very effective in drag and drop scenarios.

Inserting a Hotspot

  1. In Normal View, go to the Insert tab on the toolbar.
  2. Click Hotspot, and select one of the shapes (OvalRectangle, or Freeform). 
  3. Your mouse will change to a crosshair shape, which means you can now draw a hotspot on your slide.

A semi-transparent green shape will appear on the slide to represent your hotspot.  Although it is visible in Storyline (so you can work with it), it will be invisible when you publish your story.

Resizing, Rotating, and Repositioning a Hotspot

After you’ve drawn a hotspot on a slide, you can resize it, rotate, and reposition it.  Here’s how:

  • To resize a hotspot, select it, and drag any of its sizing handles.
  • To rotate a hotspot, select it, and drag the green rotation handle at the top of the hotspot.
  • To reposition a hotspot, select it, and, when your mouse becomes a four-headed arrow, drag the shape to the desired location on the slide.

Another way that you can resize, rotate, and reposition a hotspot is to right-click it, and select Size and Position from the shortcut menu that appears.  To learn all about the Size and Position dialog, check out this tutorial.

Showing or Hiding the Hand Cursor When Hovering Over a Hotspot

By default, a user’s mouse will change from the typical arrow cursor to a hand cursor when they hover over a hotspot in your published story.

This is great for letting users know that there is a clickable area of the screen.  But what if you don’t want the mouse to change to a hand cursor?  No problem.  Simply right-click the hotspot, and uncheck the option to Show hand cursor on hover.

Adding Triggers to a Hotspot

In order for a hotspot to have any functionality, you will need to assign one or more triggers to it.  One trigger will always be added automatically when you draw a hotspot.  Initially, it will be “unassigned”.  To modify the default trigger, double-click it, or select the trigger and click the Edit button (pencil icon).

Note that you can add multiple triggers to the same hotspot.  For example, you might assign a trigger to display additional information when a user hovers over the hotspot, and you might also add a trigger to perform an action, such as jumping to a different slide, when a user clicks on it.  To learn how to add and manage triggers, take a look at this tutorial.

Renaming a Hotspot

When you insert a hotspot, it'll appear in the timeline with a default name, such as "Hotspot 1." It's useful to give it a more intuitive name, because this makes it easier to choose the correct object when you're applying triggers or working with other features in Storyline.  There are a couple of ways to rename a hotspot.  One method is to right-click the hotspot and select the Rename option from the shortcut menu that appears.

Or, use the timeline to rename objects, including hotspots.

Deleting a Hotspot

To delete a hotspot, select it on the slide or in the timeline, and click the Delete key on your keyboard.  Note:  When you delete a hotspot, all triggers that are assigned to that hotspot will also be deleted.

Tips for Working With Hotspots

  • You can arrange hotspots like other objects on a slide by sending them backward or bringing them forward.  However, be aware that if a hotspot is covered by other elements on the slide, the hotspot triggers will not work.
  • If you have a lot of other objects on your slide, or a complex slide background, you might find it helpful to use the formatting tools in Storyline to change the hotspot's fill color, outline style, or other shape effects, to make the hotspot easier to see. These formatting changes, though, will only affect the way the hotspot looks within Storyline when you're building or editing your content. Regardless of how you format the hotspot, it'll always be invisible to the learner when you publish.
  • If a hotspot has a hover trigger applied to it that causes an object to animate into the slide, that object may flicker, flash, or repeatedly animate if the object partially or wholly covers the hotspot. For more information on this issue, click here.

You Might Also Want to Explore:

Converting an Existing Slide to a Freeform Interaction
Hotspot Freeform Question Slide
Drag-and-Drop Freeform Question Slide