Send Us Your Feedback

AXURE 201 - Article 2: OnMouseEnter, OnMouseOut, and Rollover Effects

Overview

    1. OnMouseEnter and OnMouseOut Events
    2. Rollover Images and Rollover styles on Button Shapes



1. OnMouseEnter and OnMouseOut Events

OnMouseEnter Case

The OnMouseEnter and OnMouseOut events are available on text panels, hyperlinks, and button shape widgets. The OnMouseEnter event occurs when the mouse is moved over the widget, and the OnMouseOut event occurs when the mouse is no longer over the widget.

OnMouseEnter and OnMouseOut events are frequently used in combination with dynamic panels to prototype functionality like flyout menus, rollover effects, and custom tooltips.


2. Rollover Images and Rollover Styles on Button Shapes

Rollover images and rollover styles on button shapes can also be designed in Axure RP without using the OnMouseEnter, OnMouseOut, and dynamic panels.

Rollover Images
To create a rollover image, right-click on an image widget and select Edit Image->Import Rollover Image. Then select an image to use as the rollover image. Once an image has been selected, you can preview the rollover image in the wireframe by mousing over the black and white box on the image.

OnMouseEnter Rollover button
Rollover Styles on Button Shapes
To edit the rollover style on a button shape, right-click on a button shape and select Edit Button Shape->Edit Rollover Style.

This will open the Set Rollover Style dialog where you can choose the styles to change on rollover. Check the Preview checkbox to preview the rollover styles applied to the Button Shape.

After applying the rollover styles, you can see the rollover state in the wireframe by mousing over the black and white square in the top left corner of the widget.