4 Replies Latest reply on Nov 3, 2009 9:14 PM by justoliver

    Image Hover Popup

    justoliver Level 1

      Does anyone know how to create a hover function which shows a larger version of an image thumbnail when the mouse hovers over the thumbnail?

       

      Thanks

      Oliver

        • 1. Re: Image Hover Popup
          flexprad09 Level 2

          If you are asking that property of controls which fires mouse event when its hovered its.  MouseOver, MouseOut and RollOver , RollOut Respectively for in n out.

           

          I prefer to use RollOver and RollOut though MouseOver and MouseOut is also similar.

          Only difference i figured out is that it sometimes causes flcikering problem when moved over edges in MouseOver and MouseOut case.

           

          Check this link for Difference between two.

           

          http://polygeek.com/1519_flex_the-difference-between-rollover-and-mouseover

           

          You can use states to achieve your functionality.

           

          this example can help

           

          http://flexscript.wordpress.com/2008/08/14/flex-roll-over-image-with-link-component/

           

          If this post answers your question mark it as such.

           

          Cheers,

          PRad.

          • 2. Re: Image Hover Popup
            justoliver Level 1

            Thanks Prad - the link is informative.

             

            I understand the available events that can be used however my main question

            is to find out if there is a simple way to add a blowup image on mouseover

            and then remove it on mouseout. I thought about using the popup classes but

            since this is disables any click events, i avoided this.

             

            The link you provided looks intersting - i will look into this.

             

            I am a little surprised that this hasn't been covered being a common type of

            functionality.

            • 3. Re: Image Hover Popup
              Matt Le Fevre Level 4

              justoliver wrote:

               

              Does anyone know how to create a hover function which shows a larger version of an image thumbnail when the mouse hovers over the thumbnail?

               

              Thanks

              Oliver

               

              i've currently have a similar system like this.

               

              the way i've set it up is to display a tooltip when the mouse is hovering over the image, and i add a new Image area as a child to the tooltip, reading from the same source as the image already there.

               

              very simple, and gets the job done.

              1 person found this helpful
              • 4. Re: Image Hover Popup
                justoliver Level 1

                Thanks Griz...

                 

                That pointed me in th right direction. Instead I used a custom tooltip which had the image inside a panel (using the toolTipCreate event). This worked perfectly.

                 

                But... my next issue was to reposition the tooltip if it went over the stage. I used a toolTipShown event to move the tooltip. This worked fine for static coordinates but caused a flicker for a dynamic y coordinate which gets set in the toolTipCreate event. It seems that the toolTipCreate event gets called everytime the mouse moves and thus causes the flicker ... but I am not 100% sure.

                 

                Have you or anyone else encountered this or have a solution to dynamically reposition tooltips based on the stage height?