10 Replies Latest reply on Aug 4, 2015 8:33 AM by pittsburgh_joe

    How to change images on rollover

    mcmckenna1

      I am new to edge animate so I apologize if this has a simple solution. I am trying to figure out how to switch images on rollover. For example, if I have a picture of a house and a picture of a car, If I have the picture of the house how do I enable a rollover to change that image to the car..... In other words, theres a symbol or image of a house on my site and someone hovers the image I want it to switch to the car. Thanks!

        • 1. Re: How to change images on rollover
          Sudeshnasarkar27 Adobe Employee

          Hi ,

           

          I am attaching a simple sample created to show how you could change the image on mouse over. Do let me know if this solves your problem.

           

          Thanks and Regards,

          Sudeshna Sarkar

          1 person found this helpful
          • 2. Re: How to change images on rollover
            mcmckenna1 Level 1

            Thanks for the reply!

             

            That is sort of what I am looking for. I want to be able to hover over the object and have it change, instead of hovering the button on the side you had. I was also wondering if there was anyway you could sort of explain how you did that.

             

            Thanks!

            Matt

            • 3. Re: How to change images on rollover
              iwywaw Level 1

              Hey Matt, I'll go over the code used in Sudeshna's example.

               

              sym.$("img").attr('src', 'images/Mickey-Christmas-icon.png');

               

              The image source attribute of the img symbol is being changed on the mouseover/mouseout. To do this on the image itself all you'll have to do is:

              • Add a mouseover action to your house image.
              • Insert code into that action, it will look something like this - sym.$("img").attr('src', 'images/car.png');

               

              If you'd like the car to turn back into a house once the mouse leaves the image, add a mouseout action to the house image.

              • Insert code into that action, it will look something like this - sym.$("img").attr('src', 'images/house.png');

               

               

               

              I hope that helps,

              -Doug

              • 4. Re: How to change images on rollover
                Sudeshnasarkar27 Adobe Employee

                Absolutely correct Doug! Thanks for the reply.

                 

                Regards,

                Sudeshna

                • 5. Re: How to change images on rollover
                  resdesign Adobe Community Professional & MVP

                  Images can be changed 2 different ways:

                   

                  • if the image is changed from div to img use

                   

                  .attr('src', 'images/house.png');

                   

                  • if the image is a div use

                   

                  .css({'background-image':'images/house.png', 'background-repeat':'no-repeat');

                  1 person found this helpful
                  • 6. Re: How to change images on rollover
                    mcmckenna1 Level 1

                    Awesome! Thank you all!

                    • 7. Re: How to change images on rollover
                      JustDesignStudio Level 1

                      I'm working on image rollovers for my web site. I've created a rollover for a symbol image using the img tag. The code that I've put in for one of my images for the 'mouseover' state is the method iwywaw posted of


                      sym.$("img").attr('src', 'image-name.extension');

                       

                      I've used the same code for the 'mousedown' and 'mouseout' state with their designated image names. It works perfectly but when using the sym.$("img").attr('src', 'images/image-name.extension'); on other symbol images, when previewing in the browser and hovering over one of the images, all of the images show the 'over' state of the one image. It's as if all of the images are linked together. How can I have it so that when I hover over one image, it shows the 'over' state of only that one image, not affecting any of the other images?

                       

                      Justin

                      • 8. Re: How to change images on rollover
                        pittsburgh_joe Level 3

                        they all are linked together if you named them all the same

                        you should be doing something like

                         

                        sym.$("img1").attr('src', 'image-name.extension');

                         

                        sym.$("img2").attr('src', 'image-name.extension');

                         

                        sym.$("img3").attr('src', 'image-name.extension');

                        • 9. Re: How to change images on rollover
                          JustDesignStudio Level 1

                          Thanks for your reply pittsburgh_joe. I've tried your suggestion but it doesn't work, the rollover doesn't show at all. I think it's because my symbols are img tags and the first part of the code is telling the computer that the img tag will display the source attribute but adding anything to the img tag bolded in the code below

                           

                          sym.$("img").attr('src', 'image-name.extension');.

                           

                          won't display anything on rollover. I'm not saying what I think is correct but based on my trials that's what I suspect. Any ideas? Do I need to define the img tag before putting the code in so that I can do as you said 'img1' ? If so, how do I define the img tag?

                          • 10. Re: How to change images on rollover
                            pittsburgh_joe Level 3

                            you name things in the first field under in the Properties panel