3 Replies Latest reply on Aug 19, 2013 11:19 AM by elainecc

    CSS advice for Image scale mouseover/mouseout event

    Pageturner Photography

      Hi,

       

      I'm trying to add CSS to an image to create a mouseover/mouseout event. I just can't seem to get it to work.

       

      I wan't the the scale of the image to increase to 1.5 on mouseover, then return to 1 on mouseout.

       

      Any advice on the CSS coding would be greatly apreciated....

       

      Also how would I make an image hover whilst mouseove?.

       

      Thanks, Mike

        • 1. Re: CSS advice for Image scale mouseover/mouseout event
          Xoco Level 3

          In mouseover event:

           

                  var escalaX=1.5;

                  var escalaY=1.5;

           

                  image.getSymbolElement().css({
                      "-webkit-transform":"scaleX(" + escalaX + ")",
                      "-moz-transform":"scaleX(" + escalaX + ")",
                      "-o-transform":"scaleX(" + escalaX + ")",
                      "-ms-transform":"scaleX(" + escalaX + ")"
                  });

           

                  image.getSymbolElement().css({
                      "-webkit-transform":"scaleY(" + escalaY + ")",
                      "-moz-transform":"scaleY(" + escalaY + ")",
                      "-o-transform":"scaleY(" + escalaY + ")",
                      "-ms-transform":"scaleY(" + escalaY + ")"
                  });

           

          if your image is not a symbol, then you must to use sym.$("image").css(... syntax.

           

          If you prefer animation and not instantaneous change, you can to see this thread: http://forums.adobe.com/message/5590639

          • 2. Re: CSS advice for Image scale mouseover/mouseout event
            Pageturner Photography Level 1

            Thanks Xoco,

             

            That does work, but now the image moves to the left of the stage, and there doesn't seem to have equal scale on both x&y, it seems too long. I have it  positioned bottom right and I need it to stay there, and maintain a square form untill it's actioned in the event. How would I do that?

             

            The position bottom is: x = 1147px  y = 39px.  /

             

            I've also used the timeline to animate the image 'called it ("Logo")' to move the stage up after it's clicked. It then sits at the top right until it's clicked again. The function of this is to reveal a gallery on the home page of my webiste.

             

            At the top it's: x = 1147px  y = -668px

             

            This is the first time I've used Edge, i'm loving it but I know nothing about code. Thanks for the help

             

            Mike

            1 person found this helpful
            • 3. Re: CSS advice for Image scale mouseover/mouseout event
              elainecc Adobe Employee

              Hi, Mike-

               

              Is there a reason you're trying to do this via code instead of using the scale effect on your symbol's internal timeline?  Then your mouseenter (I would suggest using mouseenter and mouseleave instead of mouseover and mouseout) code could be:

              sym.getSymbol("mySymName").play("scaleIn"); // if you have a label called scaleIn on your symbol timeline

               

              Hope that helps,

               

              -Elaine