Documentation

Adding Color – Highlighting Hotspots

First, get started by adding an image and drawing hotspots.

As with image colors, you can also select a color scheme for your hotspot highlighting, or you can manually choose your own colors.  Schemes may also be edited after they are selected.

Step 1: Highlight Color

Set the color of your hotspots

Click to enlarge

This is the color your hotspot will have when you move your mouse over the selected part of the image.

Step 2: Highlight Opacity

Click to enlarge

Adjust the level of transparency for your hotspot. A higher opacity will show a brighter color. A lower opacity will allow more of the image to show through more clearly.

Step 3: Border Color

Click to enlarge

This is the color of the border of your highlighted hotspots.

Step 4: Border Opacity

Click to enlarge

This controls the level of transparency of your hotspot borders. A higher opacity level will show a brighter color. A lower opacity level will be more subtle and allow the image to show through more.

Step 5: Border Width

Click to enlarge

Adjusts the width of the border. Can be set to 0 if you’d like to remove the border completely.

Step 6: Always show hotspots

Make those highlighted areas always visible

Click to enlarge

If this option is checked, then the highlightable areas of the image will always be visible, rather than only showing when the mouse is moved over them. This is a great option for images where it’s not immediately obvious that different areas of the image might be interactive.

Once this option is selected, you can optionally add an alternate hover color and opacity for the hotspots when they are hovered.

Step 7: Define multiple highlight styles for this image

Add different colors

Click to enlarge

If this option is selected, you’ll be able to specify multiple different hotspot styles that can then be used for your different highlightable areas. For more information on this option, please see our article on Showing hotspots in different colors.