4 Replies Latest reply on May 14, 2014 3:12 AM by Jakes Cusack

    change image on mouseover/mouseout

    Jakes Cusack

      Hello All, today I have been trying to change an image/symbol when I hover over the image

       

      I have tried

       

      My symbol is pink_dot_new.png

       

      Then I add

       

      mouseover

      $(this.lookupSelector("pink_dot_new ")).attr("src","images/Pink_dot_light.png");

       

      mouseout

      $(this.lookupSelector("pink_dot_new")).attr("src", "images/Pink_dot_light.png");

       

      And

       

      mouseover

      $(this.lookupSelector("ImageHolder")).css('background-image', 'url(images/Pink_dot_light.png)');

       

      mouseout

       

      $(this.lookupSelector("ImageHolder")).css('background-image', 'url(images/Pink_dot_light.png)');

       

       

       

      I am not sure what I am missing? Can anybody help?

        • 1. Re: change image on mouseover/mouseout
          resdesign Adobe Community Professional & MVP

          What version of Animate are you using? Why are you using this old syntax instead of the native syntax?

          for a symbol use sym.getSymnbol('name')

          is image holder a div, a rectangle in your symbol?

          Here is what I would do.

          have the symbol with the image inside and use this on your events.

          sym.getSymbol('symbol name').$('imagename').css({'background-image':'url("images/newimagepath.png")'});

          1 person found this helpful
          • 2. Re: change image on mouseover/mouseout
            Jakes Cusack Level 1

            Many thanks redesign, I am using 3.0 so i should be using the native syntax.

             

            I am still not getting any joy with the code

             

            sym.getSymbol('_dot_new').$('Pink_dot.png').css({'background-image':'url("images/Pink_dot_ light.png")'});

             

            I have a "Pink_dot.png" that i converted into a symbol and added it to my page, the symbol is called "_dot_new" then i added a mouseover and a mouseout event to the symbol and added the code but it doesn't seem to do anything? is there an order i have o follow? I also have a click event on the dot that once click a fancy box pop will appear with an image

             

            Many thanks again, very much appreciated

             

            J

            • 3. Re: change image on mouseover/mouseout
              resdesign Adobe Community Professional & MVP

              Sorry i was out for a while. So i did not mean the name of the image but its name as it appears in the elements panel - most likely it is Pink_dot.

              So here is what you should have to change the image

              I am not sure what the name of your symbol is in the elements panel but in your code it looks like your symbol is named _dot_new

              sym.getSymbol('_dot_new').$('Pink_dot').css({'background-image':'url("images/Pink_dot_light.png")'});


              addresses the symbol   +   addresses the  image element   + css  wit the name of the new image           


              incidently, you might want to add: 'background-repeat': 'no-repeat'


              Sample here:

              dot images.zip - Box

              • 4. Re: change image on mouseover/mouseout
                Jakes Cusack Level 1

                Many thanks redesign, very much appreciated, really helpful