Moving Graphic Elements On Mouse Over

[RacistForeigner]

Hi, I'm not sure where to post this but Javascript seems like it may be what I'm describing.

Let me describe my dilemma the best that I can. I have a button. When you put the mouse over the button, I want a picture to come out from underneath the button or be created. It needs to be moving down until it gets all the way out from under the button and then stop. When you take the mouse off of the button, I want the picture to go back up underneath the button until it's gone.

More specifically, if that didn't cut it for a description, I have a rolled up bamboo scroll graphic for my button. It doesn't have any text on it at all, its a rolled up scroll. When you put your mouse over it, it needs to revert to an animated gif of it rolling (which it already does), and the "unrolled" graphic is supposed to come out from underneath it as if it was unrolling onmouseover.

The unrolled graphic is the same width as the rolled up button, and the button is backed up to the header image of the site, so if I need do, the image can come out from underneath the heading and the button, but I'm not sure how to do this.

Sorry if you can't understand what I'm saying. I always have a hard time describing these kinds of problems.
Thanks for any help you can give!

[RDesignista]

Hi,

Use jquery. Use the .slideDown function.

I'm no jquery expert, so I can't write a function off the top of my head, but here's what you do:

1. Make container for both the button and the picture underneath.

2. Set z-index of button > z-index of picture and use position:relative for picture and move it up a bit, underneath the button (this will eliminate any space between the two and help the illusion of a picture coming out).

3. Set up the animation so that when you hover button, the image will slidedown.

Alternatively, you can use the animate function, which is more accurate, in terms of sliding objects, but a little more work.

-R