preload isn't working

Jimmyjazz · #1 Jan 2nd, 2007, 22:23

Hi there,
I'm making a menu with rollover tabs. They roll over properly, but the preload isn't working, and even after waiting for the hover image to show, it forgets it if I hover away and back on top of the tab. I can't see what's wrong.
code:

Code: Select all

<style  type="text/css">
#imagetabred a:hover, #imagetabred a.current{  /*change background when over red tabs*/
    background-image:url(http://yaddayadda/BMenuTabRedOver.jpg);
    color: #330000;
}
</style>


<SCRIPT language="JavaScript">
    <!--
    if (document.images)
    {
      preload_image_object = new Image();
      // set image url
      image_url = new Array();
      image_url[0] = "http://yaddayadda/BMenuTabRed.jpg";
      image_url[1] = "http://yaddayadda/BMenuTabRedOver.jpg";
 
        // creating image objects using above URLs
        var preloadedImages = new Array(); 
        var i
        for(i=0; i<=image_url.length; i++){ 
         preloadedImages[i]  = new Image(); 
         preloadedImages[i].src = image_url[i]; 
        } 
    }
    //-->
</SCRIPT>
<div > 
<span id="imagetabred"><a href="http://yaddayadda/link.htm" target="_blank">BUTTON</a> </span> 
</div>

what am I doing wrong?
also, i should note this html file (simplified) is called from an aspx page in case that's important. I don't know anything about aspx files tho.

thanks

Ryan Fait · #2 Jan 2nd, 2007, 22:27

The background switch CSS method is much better than using JavaScript to preload images. Create a single image with both the off state stacked on top of the on state. Then use something like this in your CSS:

Code: Select all

#imagetabred a {
    background: #f00 url("tab.gif") no-repeat 0 0;
}
#imagetabred a:hover {
    background-position: 0 100%;
}

That way you don't need to preload anything at all.

Jimmyjazz · #3 Jan 2nd, 2007, 22:47

aw isn't there some way to make the preload work? i've got like 50 images total over a bunch of sites and I'd rather not get into editing them all

Ryan Fait · #4 Jan 3rd, 2007, 19:33

Google is your friend on this one.

You'd still be better off editing them, though. I know the work sucks, but the background switch is a much better method as it avoids the IE flicker bug and squeezes around those without JS quite well. It also works instantly, whereas those with slow internet connections may have to wait until the rest of the page finishes loading before the other images load.

Jimmyjazz · #5 Jan 3rd, 2007, 22:50

do you think it's caused by me using (in the CSS part) the file's URL instead of the js image_url[1]? i don't know how to put image_url[1] into background-image, if it's even possible. If not, I'll just give up on it as the boss wouldn't want me spending much MORE time on the stupid menus.

Ryan Fait · #6 Jan 4th, 2007, 01:50

There is no JavaScript involved when using the CSS background switch method. It took surprisingly long for me to find a tutorial on this:

http://wellstyled.com/css-nopreload-rollovers.html

Jimmyjazz · #7 Jan 6th, 2007, 04:44

alright, thanks

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Should I preload these images	thewebkid	JavaScript Forum	5	Dec 27th, 2007 19:19
Preload bar not working in HTML site	peebman2000	Flash & Multimedia Forum	3	Feb 21st, 2007 20:14
How do you make mp3 preload sequentially?	ScottJensen	Starting Out	4	Feb 21st, 2007 13:36
IE6 image preload problem	glesig	JavaScript Forum	2	Oct 30th, 2006 12:59
Preload Flash Video	Paula	Flash & Multimedia Forum	23	Oct 13th, 2006 17:48

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
preload isn't working