Creating "Hot Areas" with the Rectangle/Canvas Control

Hey There!
We're in the process of updating our tutorials for Balsamiq Mockups 3. What you see here might not match your version (learn more).

Sometimes in Mockups you want to make multiple UI controls linkable all at once, or want to add linking to controls that don't natively support it.

In this quick tutorial we'll teach you how to use the Canvas control to create a "hot linkable area" to solve the problem.

As an example, we'll add linking capability to the Bar Chart control

Step 1: simply add a Canvas control and overlay it over the areas you want to turn into a link.

Step 2: make the Canvas transparent by dragging the opacity slider all the way to the left.

Step 3: remove the border of the Canvas.

Step 4: link the Canvas to your destination.

Step 5: group the Canvas and the controls together.

And voila', we now have a linkable Bar Chart control.

Last Updated: Nov 04, 2013 04:19PM PSTShare: