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,
image.zip 180.9 K
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.
Hey Matt, I'll go over the code used in Sudeshna's example.
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,
Absolutely correct Doug! Thanks for the reply.
1 person found this helpful
Images can be changed 2 different ways:
- if the image is changed from div to img use
- if the image is a div use
Awesome! Thank you all!
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
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?
they all are linked together if you named them all the same
you should be doing something like
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
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?
you name things in the first field under in the Properties panel