Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi all,
Vanilla are planning an update to the site on April 24th (next Wednesday). It is a major PHP8 update which is expected to boost performance across the site. The site will be down from 7pm and it is expected to take about an hour to complete. We appreciate your patience during the update.
Thanks all.

Preload rollover images - Safari

  • 22-01-2008 5:52pm
    #1
    Gordon
    Registered Users Posts: 35,523 ✭✭✭✭


    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

  • #2
    Goodshape
    Registered Users Posts: 8,488 ✭✭✭Goodshape


    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.


  • #3
    DonkeyStyle \o/
    Closed Accounts Posts: 7,145 ✭✭✭DonkeyStyle \o/


    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...


  • #4
    Gordon
    Registered Users Posts: 35,523 ✭✭✭✭Gordon


    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 :)


  • #5
    Goodshape
    Registered Users Posts: 8,488 ✭✭✭Goodshape


    [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.


  • #6
    Gordon
    Registered Users Posts: 35,523 ✭✭✭✭Gordon


    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
  • #7
    Gordon
    Registered Users Posts: 35,523 ✭✭✭✭Gordon


    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. :)


  • #8
    Goodshape
    Registered Users Posts: 8,488 ✭✭✭Goodshape


    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 :)


  • #9
    Gordon
    Registered Users Posts: 35,523 ✭✭✭✭Gordon


    Me too GS, that was causing wrinkles! Ta.


Advertisement