8 Replies Latest reply on Jan 14, 2016 5:57 PM by logancase8

    Change opacity with mouseover.

    logancase8 Level 1

      Hello. I am creating an application for my website and do not have a ton of experience with coding other than HTML5 and CSS3.

      It Adobe Edge Animate I have created my application and have an image I am using as a button. The opacity of the image is 50% by default. I would like the opacity to change to 100% on mouse over and go back to 50% on mouse off. I would also like it to stay 100% if the user clicks on it. Right now I have the mouse over and mouse off working but the problem is that it still goes back to 50% even after I click and hover off. How do I override the mouse off function? The image is called shirtsICO and the current code is as follows:

       

      click:

           sym.$("shirtsICO").css("opacity","1");

       

      mouseenter:

           sym.$("shirtsICO").css("opacity","1");

       

      mouseleave:

           sym.$("shirtsICO").css("opacity",".5");

       

      I have been playing around with If statements and couldn't get anything to work. As I mentioned I am not too experienced with javascript.

       

      Regards,

      Logan Case

        • 1. Re: Change opacity with mouseover.
          joel_pau Level 5

          Hi Logan,

           

          So, you want a clicked state. 2 ideas:

           

          1) You can disable mouseleave after a click as shown below:

          click:

              sym.$("shirtsICO").css("opacity","1").unbind("mouseleave");

           

          mouseenter:

              sym.$("shirtsICO").css("opacity","1");

           

          mouseleave:

              sym.$("shirtsICO").css("opacity",".5");

           

          2) You can create a clicked state using a class as shown below:

          click:

              sym.$("shirtsICO").css("opacity","1").addClass(" clicked ");

              sym.$(" .clicked ").css( a property or some properties here); //you set the class here.

           

          mouseenter:

              sym.$("shirtsICO").css("opacity","1");

           

          mouseleave:

              sym.$("shirtsICO").css("opacity",".5");

          • 2. Re: Change opacity with mouseover.
            logancase8 Level 1

            Thank you for your help. I was wondering if there is a way to reactivate the mouseleave when I click on another button. What I have is two buttons and when one is selected it goes to 100% opacity and sets the other button to 50%. Is there any way I can make it so that when I click the other button after clicking the first one it will be able to allow the mouseover of the other button to work again. What I mean is if the user selects Button A then it stops the mouseleave from working using the .unbind function. If they change their mind and select Button B after that is it possible to reset Button A so that mouseleave will be active again until Button A is selected again?

             

            Here is my code:

             

            //BUTTON A (shirtsICO)

             

            click:

            sym.$("shirtsICO").css("opacity","1").unbind("mouseleave");

            sym.$("hoodieICO").css("opacity",".5");

             

            mouseenter:

            sym.$("shirtsICO").css("opacity","1");

             

            mouseleave:

            sym.$("shirtsICO").css("opacity",".5");

             

            //BUTTON B (hoodieICO)

             

            click:

            sym.$("hoodieICO").css("opacity","1").unbind("mouseleave");

            sym.$("shirtICO").css("opacity",".5");

             

            mouseenter:

            sym.$("hoodieICO").css("opacity","1");

             

            mouseleave:

            sym.$("hoodieICO").css("opacity",".5");

            • 3. Re: Change opacity with mouseover.
              joel_pau Level 5

              So, if you have only 2 buttons:

              //BUTTON A (shirtsICO)

               

              click:

              sym.$("shirtsICO").css("opacity","1").unbind("mouseleave");

              sym.$("hoodieICO").css("opacity",".5").bind("mouseleave");

               

              mouseenter:

              sym.$("shirtsICO").css("opacity","1");

               

              mouseleave:

              sym.$("shirtsICO").css("opacity",".5");

               

              //BUTTON B (hoodieICO)

               

              click:

              sym.$("hoodieICO").css("opacity","1").unbind("mouseleave");

              sym.$("shirtICO").css("opacity",".5").bind("mouseleave");

               

              mouseenter:

              sym.$("hoodieICO").css("opacity","1");

               

              mouseleave:

              sym.$("hoodieICO").css("opacity",".5");

               

              If you have several buttons, it will better to use a class.

              1) With the properties panel (left side of the user interface), i click the c button (at the top of the properties panel) and i type: buttons.

              2) Inside code, i call the class using: .buttons

              //BUTTON A (shirtsICO)

               

              click:

              sym.$("shirtsICO").css("opacity","1").unbind("mouseleave");

              sym.$(".buttons").css("opacity",".5").bind("mouseleave");

               

              mouseenter:

              sym.$("shirtsICO").css("opacity","1");

               

              mouseleave:

              sym.$("shirtsICO").css("opacity",".5");

               

              //BUTTON B (hoodieICO)

               

              click:

              sym.$("hoodieICO").css("opacity","1").unbind("mouseleave");

              sym.$(".buttons").css("opacity",".5").bind("mouseleave");

               

              mouseenter:

              sym.$("hoodieICO").css("opacity","1");

               

              mouseleave:

              sym.$("hoodieICO").css("opacity",".5");

              • 4. Re: Change opacity with mouseover.
                logancase8 Level 1

                I chose to do it using the class but after doing what you instructed,whenever I select button A it makes the opacity of button B stay at 100%. I'm going to play around with it and see if I can figure out what happened. Thank you for your help.

                • 5. Re: Change opacity with mouseover.
                  joel_pau Level 5

                  well, i will build a demo file as fast as possible.

                  • 6. Re: Change opacity with mouseover.
                    logancase8 Level 1

                    ok. Thank you.

                    • 7. Re: Change opacity with mouseover.
                      joel_pau Level 5

                      Here your case ==> button States.zip - Box I use colors instead of opacity. It returns better.

                      • 8. Re: Change opacity with mouseover.
                        logancase8 Level 1

                        Thank you so much sir.