SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot get_dave's Avatar
    Join Date
    Nov 2006
    Location
    England, UK
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS Image Preloading - NEED HELP TO GO LIVE!

    Hello,

    I have a page http://www.bath-cottages.co.uk/TEST_...eroot/tour.php

    It's currently on test but i wan't to go live after some tweaks in a few days. However i have a problem with the navigation (the small picture icons). When you hover over them to get the image rollover effect, the images haven't been preloaded. Is there anyway I can preload these images to remove this ugly effect?

    Any help would be appreciated.

    David
    I'm looking for a link exchange.
    contact me or head to:
    http://www.aheadcreative.co.uk

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,342
    Mentioned
    192 Post(s)
    Tagged
    4 Thread(s)
    There are a number of techniques to accomplish this.
    With Javascript, you can preload the image "source" in an array. But, as we all know, it is bad form to rely on Javascript.
    That is why my two favorites are:
    Define the rollover image elsewhere on the page (using CSS you can set it to be OFF THE EDGE of the page) with a height and width of 1;
    Use the old attribute "lowsrc". I would suspect this has been deprecated, but all browsers still seem to respond to it. It was originally available in the days of slooooow connections to be "low quality" placeholder image that is loaded until the full image appears. If you set the "lowsrc" to be the rollover image it will get loaded in the browser cache.

    Finally, if you use the CSS rollover technique (forgive me for not being able to remember the name of the person to whom this idea is attributed) where BOTH idle and rollover are in a single image. Using CSS (changing the position in the :hover pseudo class) you simply move the one image to show its rollover portion.

    Good luck with your release!!
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  3. #3
    SitePoint Evangelist gollux's Avatar
    Join Date
    Feb 2005
    Location
    Oregon, USA
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can preload them with a bit of javascript:

    Code:
    /*****************************************************/
    /* Preload Nav Menu Rollovers                  */
    /*****************************************************/
    
    var imageFiles = new Array('/Images/BtnNavDkDn.gif','/Images/BtnNavDkVs.gif',
    		'/Images/BtnNavLtDn.gif','/Images/BtnNavLtVs.gif',
    		'/Images/BtnNavRdDn.gif','/Images/BtnNavRdVs.gif',
    		'/Images/BtnSubLtDn.gif','/Images/BtnSubLtVs.gif');
    
    var imageArray = new Array();
    
    for (var i = 0, len = imageFiles.length; i < len; i++) {
    	imageArray[i]     = new Image();
    	imageArray[i].src = imageFiles[i];
    }
    Released under the Fiasco Labs Digital Damnation Copywright,
    it's yours to make whatever the 7734 you want with it.

    (c) 2005 Fiasco Labs All Wrongs Reserved

  4. #4
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can accomplish this using css. Javascript method will fail when js is turned off. Say the link has a height of 100px make a background image of height 200px where the top is background for regular state and bottom is for the rollover state and set the background to left top for regular state and left bottom for the rollover state using the same background image. This is referred to as the sliding door technique. This will also eliminate the need for preloading images.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's actually a "state" but that's beside the point.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Another way to do this without making new images is simply to put the over state in the background of the list element and then just overlay the anchor and image on top.

    On hover you just hide the image and make the anchors background transparent and the image which is already pre-loaded is immediately shown. This is probably the fastest way to do a rollover because the image is already there and nothing has to be moved at all.

    Code:
    #enlarge li a {display:block; width:48px; height:48px; background:#fff; overflow:hidden; position:relative; border:1px solid #fff;}
    #enlarge li.one {background:url(http://www.bath-cottages.co.uk/TEST_ZONE/siteroot/images/tournav/home_icon_large.gif);}
    #enlarge li.one a:hover {background:transparent}
    #enlarge li.one a:hover img{visibility:hidden}
    Code:
        </caption>
                <ul id="enlarge">
                    <li class="one" ><a href="tour.php" title="Go to the Tour Home Page"><img 
                src="http://www.bath-cottages.co.uk/TEST_ZONE/siteroot/images/tournav/home_icon.gif" /></a></li>
    The anchor is a given a white background to hide the image that is now in the background of the list. On hover the background is changed to transparent and your img in the html is hidden allowing the image in the list to be visible.

    The class is moved to the list so that it can be manipulated. You will of course have to change all the other list elements to match the above css and html.

  7. #7
    SitePoint Zealot get_dave's Avatar
    Join Date
    Nov 2006
    Location
    England, UK
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to everyone for their input. My solution can be viewed at:

    http://localhost/bath_cottages_php/s...ocalsights.php

    I hope it works correctly for everyone. All i did was create a new div containing the rollover images. This is at the top of the code. Then I set the CSS to visbility: none (to take it out of the flow), and it seems to work.

    Please let me know if nothing works. Many thanks to all.
    I'm looking for a link exchange.
    contact me or head to:
    http://www.aheadcreative.co.uk

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately that URL points to a location on my testing server that doesn't exist.

    Furthermore, you don't need to add HTML to your code. Just add the "states" to the existing image, then hide them. Paul's earlier posts in this thread detail exactly how to do that.

  9. #9
    SitePoint Zealot get_dave's Avatar
    Join Date
    Nov 2006
    Location
    England, UK
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What the hell. Sorry I meant to put:

    www.bath-cottages.co.uk/tour/

    Dunno what I'm doing. I think that Paul may have the solution. Maybe i'll fix it later.

    Many thanks
    I'm looking for a link exchange.
    contact me or head to:
    http://www.aheadcreative.co.uk

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    That link's not working either

  11. #11
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    That link's not working either
    I presume that it's http://www.bath-cottages.co.uk/tour.php given the error message on the server

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dave
    I presume that it's...
    I suppose it is but now what was the question ?


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
  •