Image Delay On Hover Help Needed!

Discussion in 'CSS' started by gobbly2100, Oct 29, 2007.

  1. #1
    Hey,

    I have made a menu and I am using a different image when you hover over the link but when I hover my mouse over the link the image already there dissapears for a second while the new one loads.

    Is it possible to stop this?
     
    gobbly2100, Oct 29, 2007 IP
  2. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #2
    (The method below uses only CSS, and uses the :hover pseudo class. Keep in mind :hover is ONLY supported on anchor elements in MSIE.).

    Combine the images and only change the background position on hover. The image will already be downloaded, and there will be little to no latency. You have to be careful with the dimensions in regards to the element's size... make sure it's perfectly double the element's width or height, depending on how you made the image and assuming the element is fixed width... if it isn't fixed width then I suggest you provide a link.

    The image would be 100x40 pixels, and it only shows the 100x20 by default.. when hovering on the anchor element, bottom left would reveal the 20 pixels at the bottom.

    I imagine this would work.. but testing it might turn out a little different.. Let me know how it goes.
     
    soulscratch, Oct 29, 2007 IP
  3. MrX

    MrX Well-Known Member

    Messages:
    1,563
    Likes Received:
    77
    Best Answers:
    0
    Trophy Points:
    140
    #3
    use css image hovers like soulscratch says or if you're gonna keep using js, preload the images.
     
    MrX, Oct 29, 2007 IP
  4. gobbly2100

    gobbly2100 Banned

    Messages:
    906
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Oh I got it, thanks for that guys.

    Nice technique!

    You can see how I did by checking the top menu on my MMOFPS link in my signature here.

    =D
     
    gobbly2100, Oct 29, 2007 IP
  5. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #5
    Could you show the images? That would help. You should be using the universal selector and you shouldn't need to float with 100% width on your <ul>.
     
    soulscratch, Oct 29, 2007 IP
  6. gobbly2100

    gobbly2100 Banned

    Messages:
    906
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #6
    The buttons are in one image like this now:

    [​IMG]
     
    gobbly2100, Oct 29, 2007 IP
  7. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #7
    Yeah.. I posted that before you edited your prior post.. good job.
     
    soulscratch, Oct 29, 2007 IP