If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Sep 2012
    Member #
    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!


  3. #2
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Coconut Tree City
    Member #
    123 times

    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.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Search tags for this page

javascript move element on mouseover

Click on a term to search for related topics.
All times are GMT -6. The time now is 05:29 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: