Advertisement
How to add spoiler tags, edit posts, add images etc. How to - a user's guide to the new version of Boards
Mods please check the Moderators Group for an important update on Mod tools. If you do not have access to the group, please PM Niamh. Thanks!

Preload rollover images - Safari

  • #1
    Registered Users Posts: 35,527 Gordon


    Has anyone else had a problem with preloading images via CSS (not javascript) in Safari? I can't find anything via google.

    I simply have an a:link with no background, and a a:hover with a background image. I have even inserted the hover image directly into the html and watched it load into the page, when while rollingover my a link, it loads the (same) image into the a:hover link. My desired tool to preload images is to use a 1x1px div floated off to the side of the page: overflow:hidden, opacity:0. But I can't even preload the image if it exists on the page!

    Is this a known issue or am I missing something?

    Safari 3, Mac btw. FF 2 doesn't seem to do this, preloads any images fine.

    Thanks.


Comments



  • Hmm, I'm not sure this will actually fix your problem, but you could pre-load any images in the HTML and use the CSS 'display : none' to hide them completely, rather than using your current 1x1 pixel method.


    Aside from that, a good way of eliminating delays on :hover image changes is to use a method outlined here : http://www.wellstyled.com/css-nopreload-rollovers.html

    If you require no image at all for :link, you could do :
    a:link { 
        background : url('image.png') -9999 0 no-repeat;
    }
    
    a:hover { 
        background : url('image.png') top left no-repeat;
    }
    

    ..or something like that.




  • Could you do the thing where all rollover states use the one background image, but the position of the image (and what part of it is revealed) is changed based on different background-position: settings for each hover state?
    Maybe you could have one quadrant of the image transparent using a gif?
    That's how I prefer to do css image roll-overs anyway.

    [edit] Yer, what Goodshape said...




  • I was trying to save on download (as I've got way too many images as it is) so didn't want to have an image as the a:link state, just the a:hover state.

    Here's the code btw:
    [HTML]
    <html>
    <head>
    <style type="text/css">
    .hiddenpreload {
    width: 1px;
    height: 1px;
    float: right;
    }
    .hiddenpreload img{
    width: 1px;
    height: 1px;
    }

    a.imagemenu_1:link {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    }
    a.imagemenu_1:hover {
    background-image : url('images/imagemenu_1.jpg');
    }
    a.imagemenu_2:link {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    }
    a.imagemenu_2:hover {
    background-image : url('images/imagemenu_2.jpg');
    }

    </style>
    </head>
    <body>

    <div class="hiddenpreload">
    <img src="images/imagemenu_1.jpg" alt="hidden">
    <img src="images/imagemenu_2.jpg" alt="hidden">
    </div><!--imagepreload END-->

    <div class="imagemenu">
    <a href="#.htm" class="imagemenu_1">1</a>
    <a href="#.htm" class="imagemenu_2">2</a>
    </div><!--imagemenu END-->

    </body>
    </html>
    [/HTML]

    Although, I'll look into doing it that way as it could be my only way. Darnit!

    Thanks :)




  • [html]
    <style type="text/css">
    .hiddenpreload {
    display : none;
    }

    .hiddenpreload * {
    display : none;
    }

    a.imagemenu_1:link {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background : url('images/imagemenu_1.jpg') -9999px 0px no-repeat;
    }
    a.imagemenu_1:hover {
    background : url('images/imagemenu_1.jpg') top left no-repeat;
    }
    a.imagemenu_2:link {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background : url('images/imagemenu_2.jpg') -9999px 0px no-repeat;
    }
    a.imagemenu_2:hover {
    background : url('images/imagemenu_2.jpg') top left no-repeat;
    }
    </style>
    [/html]


    ^^ haven't tested it myself, but that's what I'd try. There's shouldn't actually be any need to include the hidden imagemenu jpgs in the HTML with that.

    Also, not sure if you want the menu background images to repeat or not.. just take out 'no-repeat' if you do.




  • Gah, even if you take out the hidden styling it causes problems. It downloads the a:link image correctly but when you rollover the link it downloads the a:hover image (even though it's the same image) again. That's a pain :/

    [html]
    <style type="text/css">
    a.imagemenu_1:link {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background : url('images/imagemenu_1.jpg') -9999px 0px no-repeat;
    }
    a.imagemenu_1:hover {
    background : url('images/imagemenu_1.jpg') top left no-repeat;
    }
    a.imagemenu_2:link {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background : url('images/imagemenu_2.jpg') -9999px 0px no-repeat;
    }
    a.imagemenu_2:hover {
    background : url('images/imagemenu_2.jpg') top left no-repeat;
    }
    </style>
    [/html]

    It's the same even if you don't specify -9999px, and state top left as with the :hover.


  • Advertisement


  • Ah, fixed it. I had to remove the background image from the rollover and state only position.

    [html]<style type="text/css">

    a.imagemenu_1:link {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background: url('images/imagemenu_1.jpg') -9999px 0px no-repeat;
    }
    a.imagemenu_1:hover {
    background-position : 0px 0px;
    }
    a.imagemenu_2:link {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background: url('images/imagemenu_2.jpg') -9999px 0px no-repeat;
    }
    a.imagemenu_2:hover {
    background-position : 0px 0px;
    }

    </style>
    [/html]

    Many thanks, I think that should solve the problem.

    Cheers guys. :)




  • Strange one. Haven't encountered that before -- must watch out for it in future!

    Happy to help anyway.. glad you got it sorted in the end too :)




  • Me too GS, that was causing wrinkles! Ta.


Advertisement