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
This is the color your hotspot will have when you move your mouse over the selected part of the image.
Step 2: Highlight Opacity
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
This is the color of the border of your highlighted hotspots.
Step 4: Border Opacity
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
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
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
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.
