Adobe Fireworks/photoshop Rollover image

eli290
eli290 used Ask the Experts™
on
I am trying to take 2 images (a before and after shot) and make a rollover. Basically I want the primary larger image to be the after picture then allow a person to rollover a spot in that picture and the before picture will pop up or fade in or something along those lines... Any help is appreciated
\

Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
This is not possible with photoshop alone, you'll need to use JavaScript.

I am assuming you are talking about a button rollover or something

Here are the steps involved.

1. Create the two images as described above.
2. Use css or Javascript to create the rollover as per your needs.

Here is the css tutorial for rollover: http://www.elated.com/articles/css-rollover-buttons/

Here is the JavaScript tutorial: http://www.htmlcodetutorial.com/images/images_famsupp_59.html

Author

Commented:
What about an animate Gif of some sort? I don't know photoshop very well but I have worked with fireworks a bit. I just am not sure how to accomplish something like this. I thought there was a way to do this without code being added
Animated gif cannot capture the event, which is mouse over (hover). So basically animated gif will show you a sequence of frames at a pre-defined rate.

If you want to capture an event and then change the picture - like when mouse is over the image1 then image2 is shown, then you will need to add some code as per my previous comment.
Hi eli!

> I thought there was a way to do this without code being added

When you say that you want to create a rollover, I assume that you want to make something that you can put on a web page. So you have to have code to put a single image in place. The code to make it a rollover is just about the simplest thing a beginner can do.

Here is another tutorial that I believe is a little bit easier than the one nitinsawhney provided (however nitinsawhney's will make a better rollover)

Give it a try and come back with any questions that you may have.

BTW, Photoshop used to have an add on program that would create rollovers, but that got transferred to Fireworks.
I missed the fact that you included Fireworks in your title. Here is a fairly simple video that shows the basic steps for creating a rollover in Fireworks.

http://www.youtube.com/watch?v=VCq63qiCQmY

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial