SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    Design and Promotion Crimson77's Avatar
    Join Date
    Aug 2006
    Location
    Australia
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    best option for preloading hover images *css

    Hi Guys,

    I've just started a blog to go with my website redesign and I'm having a little trouble with some finishing touches because I'm using so many hover images.

    What do you think is the best solution for preloading hover images into the cache. I found a solution that had to do with the 'focus' tag, but I'm wondering if anyone knows any problems with this?

    you can check out the site here
    http://www.crimsonfox.com.au/blog

    I'd be interested to hear your opinions on the css hover problem.

  2. #2
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Crimson77 View Post
    What do you think is the best solution for preloading hover images into the cache.
    Hi,
    Correct me if I am wrong, but, I believe what you have found is probably the best you can do because to "program into the cache" you would need control of the users browser.

    It should automatically cache anyway unless their browser has cache disabled.
    Regards
    Cameron
    Guffnet - Website hosting and design - http://www.guffnet.com
    ASPonFire - Free ASP and .NET hosting - http://www.asponfire.com
    PGBid - Let the bidding begin - http://www.pgbid.com

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The best way is to not use separate images for the hover. If you combine the normal and hover states like the sample image attached here, your normal state will have background-position:left top;, and the hover state background-position:left bottom;. This saves all the hover state css, as only one a:hover needs to be defined.
    Attached Images Attached Images

  4. #4
    Design and Promotion Crimson77's Avatar
    Join Date
    Aug 2006
    Location
    Australia
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that's a nice idea with the position option. Are there any browsers that break this process though?

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. I see what you mean... You want the images to load before the user hovers over the navigation elements.

    I'd consider putting the background images as <img> tags in the list items, then setting the display style to "none". The other thing you could do as an exnhancement to that solution is use the createElement method to load the images instead of having them in HTML when they aren't necessary.

    I've never tried any of these methods myself, but in theory, they should work.

  6. #6
    SitePoint Guru
    Join Date
    Mar 2004
    Location
    Earth
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it has display none it won't [necessarily] be cached, because it's not displayed.

    What you can do is use offleft positioning on an empty element:

    Code CSS:
    #loader
    {
      position:absolute;
      top:-10000px;
      left:-10000px;
      background:url(whatever.gif);
    }

    Where "loader" is simply:

    Code HTML4Strict:
    <span id="loader"></span>

    Or you can use the traditional JS method for caching images:

    Code JavaScript:
    var img = new Image;
    img.src = 'whatever.gif';

    But ... what Centauri said is probably the best overall approach, because then you don't need to do anything to cache anything. That technique is sometimes referred to as "CSS sprites", and was pioneered by Petr Stan&#237;ček [aka -pixy-] -- http://wellstyled.com/css-nopreload-rollovers.html


Bookmarks

Posting Permissions

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