Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6

Thread: Preload Images

  1. #1
    Senior Member
    Join Date
    Mar 2004
    Posts
    1,518
    Member #
    5220
    On the nav on my site, when you rollover it, there's about a 2 - 3 second delay before it kicks in. After that it works instantly every time. But, what I want to know is how do you make it so it works instantly every time?

    I think it could be something to do with preloading images?? I've seen it on other sites and their navigation systems work fine and instant so how do you do it?

    Any help would be appreciated!
    Rednerve
    Creative Freelance Design

  2.  

  3. #2
    Senior Member Fallout's Avatar
    Join Date
    Aug 2003
    Location
    Richmond, Virginia
    Posts
    543
    Member #
    2748
    You can do this in CSS (its not really a preload as you would think of it) or Javascript. I think the CSS way is much more elegant than a huge chunk of JS code, however.

    In CSS, make your <img> tag have a height of your current image.
    Code:
    <style>
    a:hover { height 30px; background: url(image.jpg) no-repeat; }
    </style>
    
    <!-- where the menu code is: -->
    <a href="page.html">The Link</a>
    Then open both the original AND the rollover image in Photoshop (or similar app) and append the rollover to the bottom of the original image file (ie. you would double the height and position the rollover below). Your file then would have a height of 60px while the containter tag is only 30px. CSS can then be used to shift the image down on :hover to show only the rollover part:
    Code:
    <style>
    a:hover { background-position: 0 30px; }
    </style>
    Thus, when you hover the mouse, only the bottom portion is shown, and you have your rollover effect.

    Edit for clarity: this works as a preloader of sorts because the whole image is loaded with the rest of your site, so the shift doesn't have to load anything new, its already there.

  4. #3
    Senior Member
    Join Date
    Mar 2004
    Posts
    1,518
    Member #
    5220
    Phew! That sounds complicated. I'll have to have another look once I get back from school, see if I can get my head around it then!
    Rednerve
    Creative Freelance Design

  5. #4
    Senior Member jbagley's Avatar
    Join Date
    Sep 2004
    Location
    Cape Town
    Posts
    845
    Member #
    7422
    Wow. thats cool! I never thought of that! Ive learnt so much about CSS in the last 2 months, and this is the cherry on the cake! I dont like to use javascript any more for my navbar, but the only CSS tricks I can use for it are text and background color changes.

    This puts a whole new perspective on navbars for me! cool stuff.

  6. #5
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    Quote Originally Posted by will7
    On the nav on my site, when you rollover it, there's about a 2 - 3 second delay before it kicks in. After that it works instantly every time. But, what I want to know is how do you make it so it works instantly every time?
    You have to define the alternate image object before loading the page. That way the rollover-image is forced to load with the rest of the page, and not the first time you ask for it (by placing the mouse over the image) See this thread for elaboration.

    CSS solutions are more elegant though, you should aim for those primarily.
    S. Rosland

  7. #6
    Junior Member
    Join Date
    Feb 2005
    Posts
    10
    Member #
    8888
    the css way of doing it with a single image is by far the best. avoid java like the plague. because thats what it is. here is a fantastic article about how to do it with css.
    http://www.alistapart.com/articles/sprites/
    also it will teach you something about lists and menus. its not only faster. but its the better way. dont use java or browser spacific tricks. just do it right damnit heh


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:31 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com