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
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
Starting from the last coordinate selected, draw from there to the first coordinate on the second hotspot
Step 3: Highlight the second area
Work your way around the second area, adjusting the coordinates and highlighting that area.
Step 4: Minimize the connection
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
Keep dragging towards the first coordinate on the second hotspot
Step 6: Finish the connection
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
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
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.