Documentation

Connecting two hotspots on an image

We occasionally get a request to associate more than one hotspot with the same More Info content. There isn’t a predefined way to do this in Draw Attention – we have just a one-to-one relationshp between image hotspot areas and more info content, but in this document, we’ll walk you through a workaround that can work for many cases.

Step 1: Highlight the first area

Click to enlarge

Select the coordinates for the first hotspot

Draw a hotspot around the first area just as you would for any other highlightable area. Need some tips? See our article on drawing hotspots.

Step 2: Connect to the second area

Click to enlarge

Starting from the last coordinate selected, draw from there to the first coordinate on the second hotspot

Step 3: Highlight the second area

Click to enlarge

Work your way around the second area, adjusting the coordinates and highlighting that area.

Step 4: Minimize the connection

Click to enlarge

Starting from the last coordinate selected, move slightly off the dot and click and start dragging the line towards the first coordinate selected on the second hotspot

Step 5: Close up the gap

Click to enlarge

Keep dragging towards the first coordinate on the second hotspot

Step 6: Finish the connection

Click to enlarge

Drop the line exactly on top of that first coordinate. The key here is to get as thin a line as possible connecting the two highlights.

Step 7: Adjust the border settings

Click to enlarge

Under the Highlight Styling section, set the Border Opacity to 0%, and the Border Width to 0px. This will make the border invisible, and the line connecting your two spots invisible.

Step 8: Admire your work

Click to enlarge

Preview the image and try moving your mouse over one of the hotspots. You’ll see both areas highlight and the more info area revealed on click or hover, as expected.

If you can see the connection between the two areas, try going back and adjusting the points to close that up.