preload isn't working

[Jimmyjazz]

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]

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]

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]

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]

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]

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]

alright, thanks