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.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
  1. #1
    Senior Member kade119's Avatar
    Join Date
    Feb 2007
    Location
    USA
    Posts
    532
    Member #
    14888
    Liked
    1 times
    why is it that css/html menus w/ .gif or any format, on the first hover , they disappear is it has to load? is there a way to fix this ?

  2.  

  3. #2
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Are you using one image or two?

    Is this posted somewhere so we can look?
    Shani

    I have an eye for detail like you'd never believe.

  4. #3
    Senior Member kade119's Avatar
    Join Date
    Feb 2007
    Location
    USA
    Posts
    532
    Member #
    14888
    Liked
    1 times
    2 images


    ill send u prvt link

  5. #4
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    The images are in different files. The second image does not get loaded until the :hover. To fix this, open up your images in a graphics editor, Take one image and double either its width or height, and put both images in the same document.

    When both "states" are in the same image, your a will define the background image and a background-position; the hover will only define the background-position (and automatically use the same image);

    Code:
    a.img1 {
    background-image:url(graphics/button1.png);
    background-position:0 0; }
    
    a.img1:hover {
    background-position:0 35px; }
    Shani

    I have an eye for detail like you'd never believe.

  6. #5
    Senior Member kade119's Avatar
    Join Date
    Feb 2007
    Location
    USA
    Posts
    532
    Member #
    14888
    Liked
    1 times
    but it takes 2 images for the simple fact i have the image to become brighter when hovering....

  7. #6
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    If you use two images you get the delay.

    I have not done any work with .pngs, but can you make one part brighter than the other?
    Shani

    I have an eye for detail like you'd never believe.

  8. #7
    Senior Member kade119's Avatar
    Join Date
    Feb 2007
    Location
    USA
    Posts
    532
    Member #
    14888
    Liked
    1 times
    well just in the graphic program like photoshop .. rollover the images on the link i gave u .. u will see

  9. #8
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    No, the idea here is to combine the two images into one image, with the sole difference being the position. Modifying the background-position property will move the background behind the element that has the image in it, and thus will make the background appear to `change'. The constraints on this are that both images must be either the same width or height, and that they repeat in at most one direction (so that you can either stack the two on top of each other in your combined image or place them one next to the other).

  10. #9
    Member metromax's Avatar
    Join Date
    Jun 2007
    Posts
    76
    Member #
    15335
    try this:

    Code:
    a.img1 {
    background-image:url(graphics/button1.png);
    background-position:0 0; }
    
    a.img1:hover {
    background-position:0 -35px; }

  11. #10
    Senior Member kade119's Avatar
    Join Date
    Feb 2007
    Location
    USA
    Posts
    532
    Member #
    14888
    Liked
    1 times
    im sorry guys but im not understanding..


    lets start at step one, setting up my 2 graphics for the button

    say i have a red button that i want to turn blue.. using an image

    so i have a red.png and a blue.png i combine those into one ?

    red_blue.png? can you explain that part? and then the css


Page 1 of 2 1 2 LastLast

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:09 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com