Showing hotspots in different colors (sold vs available example)

As an example below, we’ll use a trade show floor map to show some booths as sold, and some as available.  We’ll highlight sold booths in red, and available seats in green.

This approach is helpful for trade shows, concerts, conventions, etc.

Get started by adding your image, drawing hotspots, and setting the general color settings and hotspot color settings.

Step 1: Set your hotspot options

Always visible, and multiple styles

Click to enlarge

In the Highlight Styling section, check the box for Always show hotspots for this image and also the checkbox for Define multiple highlight styles for this image.

After indicating that you want to define multiple highlight styles, you’ll see a new Styles section appear.

Step 2: Create a sold style

Click to enlarge

Create a Sold style. Add it’s name, and set the settings for highlight color, opacity, border color, hover color and hover opacity.

Optionally, you can select from one of our pre-made styles to set all settings quickly. If you select a pre-made style, you can still edit individual settings to customize them to your liking.

Step 3: Create an available style

Click to enlarge

Repeat the steps above to create a second style called Available.

Step 4: Save

Save your changes

After creating your new highlight styles, be sure to click the blue Save or Update button to save your changes.

Step 5: Assign styles to hotspots

Give them some color

Click to enlarge

Now that you’ve indicated that you want to use multiple highlight styles on an image, you’ll see a new option when you edit your individual hotspots – Style. Select a style for each hotspot.

Step 6: View your work

Admire what you've done!

Click to enlarge

View or preview your Draw Attention image to see the hotspots highlighted in the two different styles that you selected.