Register

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 6 of 6
  1. #1
    Senior Member
    Join Date
    Oct 2007
    Posts
    241
    Member #
    15910
    I have a simple javascript for displaying buttons and when the mouse is over a button, the button change color....
    There are two problems:
    First one, which I definitely want solved, when you bring your mouse over the button, only the first button picture disappears and that's it. The second picture doesn't show up....Only if you hold your mouse on the button for more than about 2-3 secs, then the second picture of button appears. After that point there are no problems when displaying the second picture of button when mouse is over it...More interestingly, when I used another pair of button pictures, it works, by which I mean the second picture appear immediately when mouse is over it.
    Second, whenever the mouse is over the button, at the top of the window it appears as if the page is reloading for a very short duration. How can I eliminate this?
    the website is robotdukkani.com and please look at the menu buttons at the left. on the main page I include the menu buttons as a php include. so to avoid confusion when you view source code, I am adding the code for menu_side.php below:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL="http://www.w3.org/TR/html4/loose.dtd"]http://www.w3.org/TR/html4/loose.dtd[/URL]">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <style type="text/css">
    .menu{
    width:100px;
    }
    .menu a{
    display:block;
    width:175px;
    height:50px;
    valign: center;
    margin:-15px 1000px 0px 0px;
    background:url([URL="http://www.robotdukkani.com/pictures/image2.jpg"]http://www.robotdukkani.com/pictures/image2.jpg[/URL]) no-repeat 0 0;
    line-height:30px;
    font-family:Arial ;
    font-size:12px;
    font-weight: bold;
    color:white;
    text-align:center;
    text-decoration:none;
    }
    .menu a:visited{
    color:#black;
    }
    .menu a:hover{
    color:black;
    background:url([URL="http://www.robotdukkani.com/pictures/image3.jpg"]http://www.robotdukkani.com/pictures/image3.jpg[/URL]) no-repeat 0 0;
    }
    .menu a:active{color:#ffffff;}
    </style>
    </head>
    <body>
    <div class="sidebuttons">
    <div class="menu">
    </br>
    <a href="http://www.robotdukkani.com/orange.php">ORANGE</a>
    <a href="http://www.robotdukkani.com/blue.php">BLUE</a>
    <a href="http://www.robotdukkani.com/yellow.php">YELLOW</a>
    <a href="http://www.robotdukkani.com/black.php">BLACK</a>
    <a href="http://www.robotdukkani.com/orange.php">ORANGE</a>
    <a href="http://www.robotdukkani.com/blue.php">BLUE</a>
    <a href="http://www.robotdukkani.com/yellow.php">YELLOW</a>
    <a href="http://www.robotdukkani.com/black.php">BLACK</a>
    </div>
    </div>
    </body>
    </html>

  2.  

  3. #2
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    the reason its taking 2-3 seconds is because when you hover, its loading the image.
    usually the technique for doing this is that you make 1 image with both states
    Example


    button.jpg
    | RED HOME | (this is 25px high)
    | BLUE HOME | (this is also 25px high)

    THESE ARE BOTH 1 IMAGE!

    menu a{
    background-image: url('button.jpg');
    background-repeat: no-repeat;
    background-position: 0 0;
    }

    menu a:hover{
    background-position: 0px -25px; /*shift 25px up, showing the 2nd image which has already been loaded*/
    }

  4. #3
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    a lot of people would make the first state
    X pixels then leave a certain pixel gap, then the other image

    example

    red home - 25px
    gap - 25px
    blue home - 25px

    then when you shift
    menu a:hover{background-position: 0 -50px;} /*shifting 50pixels up(shifts the home up, as well as the gap up, displaying the blue home)

    If you still dont get it, look at the above example and imagine u have a paper over it, with a lil window cut out for "red home". Now, imagine sliding that paper up 50pixels, in the window you should see blue home right?

    gluck

  5. #4
    Senior Member
    Join Date
    Oct 2007
    Posts
    241
    Member #
    15910
    Thank you but I am still not clear. Firt of all, I dont want the button to shift up or down when you hover over it. Or did I misunderstand?
    Also:
    1- in your code, where do you tell the program to load image2.jpg and image3.jpg?
    2-where should I write what you wrote in my code exactly? For example button.jpg and all other code you wrote. I am not clear where in my code I should put them. Thanks

  6. #5
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    You misunderstood. The button does not shift, the entire image shifts up.
    For example, your image instead of image1 and image2, put both of them in 1 image called button.

    Then

    #menu a{
    display: block;
    height: 25px; /*this block is 25 pixels high*/
    background-image: url('button.jpg'); /*this image has both the red button and the blue button(hover)*/
    background-repeat: no-repeat;
    background-position: 0 0; /*this specifies we do not shift the image at all, meaning it will show the full width, and 25pixels high (becuase our block is 25px high)..this shows the red image*/
    }

    #menu a:hover{
    background-position: 0 -25px; /*this specifies we grab the image at the top left corner, and shift it up 25pixels, this means that the bottom half of the image will now be in the 25pixels button (this shows the blue background image now)*/
    }

    take a look at this
    http://4--all.com/howtos/how-do-i-ma...on-in-css.html

    Look at the image in 'How do i make a hover button section'

    Put your fingers covering the 2 bottom images. and your fingers from the other hand above the first image.
    Now ..see how image 1 is the only thing showing?
    Now, imagine the image sliding 50pixels up (this is the height of their buttons)
    if the image slides 50 pixels up, your top fingers cover image1, image 2 ill show, and your bottom fingers wlil cover image3.

    For a button hover they are usually 2 state or 3 state.
    2 state = 1image 2 sections normal and hover
    3state = 1 image 3 sections normal, hover, click

  7. #6
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    the BUTTON is NOT shifting up or down.
    #menu a:hover{background-position: 0 -25px;}

    The BACKGROUND is shifting up, the button stays in place


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
  •  
All times are GMT -6. The time now is 05:29 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com