HOT SPOT WIDGETS

© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

EXAMPLE USES

HOT ZONES

Use hot spots when an image should have different interactive zones. Add a hot spot widget on top of each area and add interactions to each hot spot.

ANCHOR LINKS

A hot spot widget can be the destination for an anchor link, if the anchor link needs to go to a location where there is no widget (e.g. the page margin above the widget).

EDITING

LOCATION, SIZE, AND ROTATION

To move a widget, drag and drop it into place or use the arrow keys to nudge. You can also choose the exact location of a widget using the "x" and "y" fields in the top toolbar or in the Inspector’s Style tab.


When a widget is selected, a green border is drawn around it. Handles on the border can be dragged to resize the widget. To maintain the aspect ratio of a widget when resizing via the handles, hold the [SHIFT] key while dragging.


Widgets can also be resized to a specific pixel value. Use the “w” and “h” fields in the top toolbar or in the Inspector’s Style tab to set the widget size in pixels. To constrain the widget’s proportions, click the “Maintain aspect ratio” icon between the “w” and “h” fields.


Rotate a widget by holding [CTRL] / [CMD] while clicking a corner handle on a widget. Drag to set the angle of rotation. You can also enter an exact degree of rotation in the "R°" field of the Inspector's Style tab. Text can be rotated to a different angle using the "T°" field in the Style tab.

INTERACTIVITY

LINKS

The quickest way to add a link to a hot spot widget is to select the widget and click "Create Link" in the Interactions tab. A list of pages in the project will appear. Click on the name of target page to create the link and close the dialog. Learn more about creating interactions here.

ANCHOR LINKS

Use the hot spot widget as the target of an anchor link when there isn't already a suitable widget at the target location. For example, anchors often scroll to a location slightly above the target text or image.


Put a hot spot widget in the target area. On the button or text link that links to the anchor location, add an OnClick interaction. Choose the "Scroll to Widget" action. In the "Configure actions" section of the Case Editor, choose the hot spot widget. You can select whether the scroll should be vertical only (the most common selection), horizontal, or both. The scroll can be animated, and you can choose an animation style and set a duration.