Animate upon mouseover

The scenario is like this: Divide the screen into 2 columns: left col consists of all the rollover buttons and the right col will show the animation. How can I do it such that the right col animation will show up when I mouse over the respective buttons in the left column?
Kindly provide some step by step help. Thanx!
Who is Participating?
weedConnect With a Mentor Commented:
Well, actually, yes, photoshop. But youll have to use ImageReady which is bundled with photoshop.

Just create your simple rollover effect as per the manual. The difference will be that you'll create an animated gif separately, and replace the rolled over image with the animated gif in the generated HTML. I dont think there's a way to do that in ImageReady but doing it manually is pretty straight forward.
Not in PhotoShop. You'll want Fireworks and/or Dreamweaver.
The bigger question is if it will show up in time...if it's a large animated gif, it may not run completely (or even load) before the mouse moves away.

You can preload the images, but that doesn't change the time needed to run the thing.

If you have Adobe Golive then this tutorial will show you how to do it:

Its very simple, as weed said.  But to elaborate on the html/javascript pocedure a little,  If you want Image2 to change when the move is moved over Image1, then you need an onmouse over even for Image1 that changes the source file for Image2 to the animation you want displayed.  You would also probably want to have an mouseout event as well to change Image2 back to what it was before.  Let me know if you need any further detail.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.