Applies to: All versions of GUI Design Studio
I would like to show a dialog box or navigate to a different screen when I click an area of an image.
Image Mapping is a method of using different areas of a single image to execute behaviors such as making an element appear, browsing to a different web page, or displaying an application screen.
1. Add an image to your design. For example, choose an image in the Project File Browser from a "Pictures" folder you've previously added a link to, then drag and drop the image onto the workspace.
Note: There are 3 different methods to add an image to your project or design. To learn more, see the article here.
2. Open the Storyboard Panel. Drag and drop the navigation overlay onto an area of the image.
3. From the navigation overlay, you may create navigation connections. The connections can have any Event Trigger and Navigation Type, according to the behavior you want to produce. See the example below to better illustrate this step.
This example contains 6 Navigation Overlay elements to map areas of the image. The top 3 are connected to Text elements using "Toggle Overlay" navigations to create mouse-over tips. 2 others are connected to simple Message Box elements in place of actual designed functionality. The last Overlay is connected to an actual dialog design.
Here's what it looks like when the prototype design is run. Click the video below to see it:
Attached is the ImageMapExample.gdd file for running in the Viewer and for examining and running in GUI Design Studio. Please feel free to download and learn from this design.