10 Replies Latest reply on Dec 9, 2014 2:58 PM by resdesign

    How would I achieve a "magnify" image effect on an image that is only visible on "hover"

    jjones-otm Level 1

      I have come to understand that Adobe Edge Animate can now load external javascript script into projects. So I would like to use this feature to load a "maginfy/zoom" effect onto an image that will be revealed once a button is clicked on. To clarify the process  I had in mind would go something like this:

       

      1. There is a map the user can view

      2. When a user hovers thier mouse over sections of the map a "callout box" would appear

      3. Inside that "callout box" would be further information about that particular section as well as an image

      4. When the user hovers over that image, it would magnify similar to this: http://www.elevateweb.co.uk/image-zoom/examples (see the "inner zoom" example)

       

      I've tried loading the elevatezoom.js script into a project, but I don't quite understand how I would apply this effect to a "hidden" image. Most effects like this rely on external css styles, as well as specific "ID" names in order to call the function. Once the project is saved and published, when I try to view the HTML to add those "ID" names my images are not viewable.

       

      Would someone mind helping me with this? I'd be most grateful.