Revert HotSpot to original state

Hey all, I made an interaction using a HotSpot and dynamic panel to zoom an image in a repeater (for an example see Axure Blogs on the Axure website and hover over the image). I was wondering how you get the image to revert back to its original size when you stop hovering over it as it gets stuck as zoomed in if I hover over it once and move away. Thanks for any feedback.

You can do it with the STATE on the pictures of your repeater,

  • at flyover SET PANEL STATE 2 with a zoom (you enlarge the size of the image for a zoom effect)
  • on mouse out SET PANEL STATE 1 in the normal state
    and this will apply with all the widgets that are in your repeater.

Another method, which should produce a smoother grow/shrink effect is to just use the OnMouseOut event with a Set Size action to set the width and height to original dimensions. If you don’t know the dimensions, you can either use math or some variables to store the initial dimensions.

scale image with hover.rp (149.6 KB)

In this demo I show three ways to do this:

  1. Hard numbers for the image dimensions
  2. “Local” variables, using text widgets in the dynamic panel
  3. Math, where the image size is scaled up by 110% (multiply by 1.1) and then scaled down to [[This.width]] , [[This.height]]

Note that you don’t need a hotspot to do this, as hovering anywhere on the dynamic panel will zoom in (as on Axure Blog site) unless you want to trigger it from another location or only a portion of the image/panel.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.