Preload Images for inside Javascript URLs

[robertcathles]

Hello out there!

My name is Robert, and I have built my own website. The URL is http://uk.geocities.com/robcboff/index.html

I have created a navigation menu for my website, which I first copied from Apycom's applets. I had problems loading the applets from this website, so I created my own HTML and Java one. I spent ages working on it so I am really pleased with it!

One problem I've always had, however, is that the code for the navigation bar is wayyyy too much for the size of the page (46K). So I went looking around this website and some others for some alternative menus, found some, and then regenerated my navigation bar based on the java that came with them. I have saved 26K with this new script, but I have a problem: The images do not preload.

On my index.html page, I use an image hiding and displaying CSS + Javascript instead of preloading the images. An example:

<span class="nava">
<img src="nav-bg1.gif" id="no1a"><img src="nav-bg2.gif" style="display:none;" id="no1b"><img src="nav-bg3.gif" style="display:none;" id="no1c">
<a href="construct.html" class="nav" 
onMouseOver="javascript:document.all.no1a.style.display='none';
javascript:document.all.no1b.style.display='inline';javascript:this.style.color='#3775FF';"
onMouseOut="javascript:document.all.no1a.style.display='inline';
javascript:document.all.no1b.style.display='none';
javascript:document.all.no1c.style.display='none';javascript:this.style.color='#000099';"
onMouseDown="javascript:document.all.no1b.style.display='none';
javascript:document.all.no1c.style.display='inline';"
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Construction List&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
</span>

With my new code, I have created this page: http://uk.geocities.com/robcboff/index2.html
But the problem is that the images (I have highlighted them in red) do not preload.

The new script is:

<script language="JavaScript1.2">

//Thanks to http://www.dynamicdrive.com/dynamicindex1/highlightmenu2.htm
//Also great thanks to http://www.faqts.com/knowledge_base/view.phtml/aid/4005

function over_effect(e,state){
if (document.all)
source4=event.srcElement
else if (document.getElementById)
source4=e.target
if (source4.className=="nav")
source4.style.backgroundImage = state == 'none' ? 'none' : 'url(' + state + ')';
else{
while(source4.tagName!="TABLE"){
source4=document.getElementById? source4.parentNode : source4.parentElement
if (source4.className=="nav")
source4.style.backgroundImage = state == 'none' ? 'none' : 'url(' + state + ')';
}
}
}

</script>

And the table to load them is:

<table width="138" cellspacing="0" cellpadding="0" onMouseover="over_effect(event,'nav-bg2.gif')" onMouseout="over_effect(event,'nav-bg1.gif')" onMousedown="over_effect(event,'nav-bg3.gif')" onMouseup="over_effect(event,'nav-bg3.gif')" style="border-left:1px solid #F39333;border-top:1px solid #F39333;border-right:1px solid #AF7133;border-bottom:1px solid #BF7933;">

And an example of one link is:

<tr><td class="nav"><a href="construct.html">Construction List</a></td></tr>

I have tried some simple javascripts to try and preload them, but to no success. Can you please help me solve this problem?

Thanks very much for your time I was really pleased when I made this new script but when I checked to see if worked for real instead of locally on my computer, I got very angry!!!

So if anyone can help me (please!) then I would be really happy!

[Twey]

My name is Robert, and I have built my own website.

We feel your pain.

To preload an image, you do this:

(new Image()).src = "path/to/image.png";

[robertcathles]

Sorry, I have tried your script, and unless I have used it incorrectly, it does not work.

I have uploaded the modified page with Twey's sugggested script. See how it fails to load the images just like http://uk.geocities.com/robcboff/index.html ?

The modified page is: http://uk.geocities.com/robcboff/index2b.html

Please note: the three images I have loaded in my page are not like <img src="nav-bg1.gif"> tags. The image URLs are written in Javascript. Please check my first post.

Thank you for your help and time anyway

[Twey]

Please note: the three images I have loaded in my page are not like <img src="nav-bg1.gif"> tags. The image URLs are written in Javascript.

Doesn't matter.

Sorry, I have tried your script, and unless I have used it incorrectly, it does not work.

The modified page is: http://uk.geocities.com/robcboff/index2b.html

It works here...
Mozilla/5.0 (X11; U; Linux x86_64; en-GB; rv:1.8.0.1) Gecko/20060215 Firefox/1.5.0.1

<center><br><h3>Windows Welcome Music</h3>

This WMA music file is already preinstalled with your Windows XP computer, <br>but is only actually used when you first run the setup program for User Accounts. 

<p>
<EMBED SRC=C:/WINDOWS/SYSTEM32/OOBE/IMAGES/TITLE.WMA AUTOSTART=false WIDTH=350 HEIGHT=45 PLAYCOUNT=1></EMBED>
</p><P>
<A HREF=C:/WINDOWS/SYSTEM32/OOBE/IMAGES/TITLE.WMA>Download - Copy to Local Disc (Save Target As)</A> 	<BR><BR>Original Location: C:/WINDOWS/SYSTEM32/OOBE/IMAGES/TITLE.WMA
</P>
</center></span>

Is it worth pointing out that this is a really daft idea?

[robertcathles]

I think I had written my query incorrectly, what I was supposed to mean, was:

When I mouseover my images, they do not immediately load up. So when I scroll over my navigation bar, the images that are meant to replace nav-bg1.gif do not load. If I keep scrolling around, All I can see is my background colour for my page and not these images. After a few seconds, they load.

I have noticed that if I click a link on them, then go back, it does work.

Can you please help me get it to work just like my original code: http://uk.geocities.com/robcboff/index.html

And just incase you meant something else: I am using Internet Explorer 6 with SP2. I do not use Firefox or any Mozilla product. I have the latest version installed but only in case IE fails to work, which it never has. Firefox fails to load many of the scripts I have spent ages working on that DO work for IE. That's why I don't use it.

[robertcathles]

Is it worth pointing out that this is a really daft idea?

What's daft about embedding free music? I listen to it all the time, it's very soothing.