Images won't preload from directory I want to use?

**14Peace** · 12-06-2005, 02:51 AM

Hello Everyone, I need help with a Java Script generated by Fireworks MX for a rollover navigation menu. The problem is that the images that are suppose to preload will not do so unless the associated images are in the same directory as the html page using the script. root/images/nav.gif is how I want it to work. I don't know much about Jave Script and I have to believe the path is somehow set in the JS?

Is there anyone that can point me to the problem? And how to solve it?

Thanks.

**jscheuer1** · 12-06-2005, 03:43 AM

Generally a preload function has two main statements:

something=new Image();
something.src="image.gif";

The above is the simplest example. In it, something is either a variable or a variable as a member of an array, new Image(); creates the variable as a new image object in the scope of the script. Setting something.src equal to an image file (image.gif in our example) starts the browser loading the image file into the cache. If you were to find this bit of code and change it to:

something.src="root/images/image.gif";

You would be home free. Often, it is not so simple. the image files can be listed in an array of their own. If this is the case, the path may best be prepended there.

If you need more specific help, a link to your page or a look at your code would allow me to see how the script you are using is defining its images.

**14Peace** · 12-06-2005, 04:05 AM

Thank You for offering to look at the code. Here it is as it was created by Fireworks. I just added it to the appropriate web page using cut and paste.

<html>
<head>
<title>Navigate.gif</title>
<meta http-equiv="Content-Type" content="text/html;">

<script language="JavaScript">

</script>
</head>
<body bgcolor="#721fa2" onLoad="MM_preloadImages('images/Navigate_r2_c1_f2.gif','images/Navigate_r3_c1_f2.gif',images/Navigate_r4_c1_f2.gif','images/Navigate_r5_c1_f2.gif','images/Navigate_r7_c1_f2.gif','images/Navigate_r9_c1_f2.gif','images/Navigate_r11_c1_f2.gif');">
<table border="0" cellpadding="0" cellspacing="0" width="100">

<tr>
<td><img src="images/spacer.gif" width="100" height="1" border="0" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
</tr>

<tr>
<td><img name="Navigate_r1_c1" src="images/Navigate_r1_c1.gif" width="100" height="7" border="0" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="7" border="0" alt=""></td>
</tr>
<tr>
<td><a href="home.html" target="_self" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('Navigate_r2_c1','','Navigate_r2_c1_f2.gif',1);"><img name="Navigate_r2_c1" src="images/Navigate_r2_c1.gif" width="100" height="37" border="0" alt="Home"></a></td>
<td><img src="images/spacer.gif" width="1" height="37" border="0" alt=""></td>
</tr>
<tr>
<td><a href="about.html" target="_self" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('Navigate_r3_c1','','Navigate_r3_c1_f2.gif',1);"><img name="Navigate_r3_c1" src="images/Navigate_r3_c1.gif" width="100" height="41" border="0" alt="About Us"></a></td>
<td><img src="images/spacer.gif" width="1" height="41" border="0" alt=""></td>
</tr>
<tr>
<td><a href="clients.html" target="_self" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('Navigate_r4_c1','','Navigate_r4_c1_f2.gif',1);"><img name="Navigate_r4_c1" src="images/Navigate_r4_c1.gif" width="100" height="41" border="0" alt="Client Page"></a></td>
<td><img src="images/spacer.gif" width="1" height="41" border="0" alt=""></td>
</tr>
<tr>
<td><a href="talent.html" target="_self" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('Navigate_r5_c1','','Navigate_r5_c1_f2.gif',1);"><img name="Navigate_r5_c1" src="images/Navigate_r5_c1.gif" width="100" height="39" border="0" alt="Some of our Talent"></a></td>
<td><img src="images/spacer.gif" width="1" height="39" border="0" alt=""></td>
</tr>
<tr>
<td><img name="Navigate_r6_c1" src="Navigate_r6_c1.gif" width="100" height="5" border="0" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="5" border="0" alt=""></td>
</tr>
<tr>
<td><a href="JobPostings.html" target="_self" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('Navigate_r7_c1','','Navigate_r7_c1_f2.gif',1);"><img name="Navigate_r7_c1" src="images/Navigate_r7_c1.gif" width="100" height="53" border="0" alt="Job Postings"></a></td>
<td><img src="images/spacer.gif" width="1" height="53" border="0" alt=""></td>
</tr>
<tr>
<td><img name="Navigate_r8_c1" src="images/Navigate_r8_c1.gif" width="100" height="8" border="0" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="8" border="0" alt=""></td>
</tr>
<tr>
<td><a href="forms.html" target="_self" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('Navigate_r9_c1','','Navigate_r9_c1_f2.gif',1);"><img name="Navigate_r9_c1" src="images/Navigate_r9_c1.gif" width="100" height="50" border="0" alt="Talent Forms"></a></td>
<td><img src="images/spacer.gif" width="1" height="50" border="0" alt=""></td>
</tr>
<tr>
<td><img name="Navigate_r10_c1" src="Navigate_r10_c1.gif" width="100" height="4" border="0" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="4" border="0" alt=""></td>
</tr>
<tr>
<td><a href="contact.html" target="_self" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('Navigate_r11_c1','','Navigate_r11_c1_f2.gif',1);"><img name="Navigate_r11_c1" src="images/Navigate_r11_c1.gif" width="100" height="48" border="0" alt="Contact Us"></a></td>
<td><img src="spacer.gif" width="1" height="48" border="0" alt=""></td>
</tr>
<tr>
<td><img name="Navigate_r12_c1" src="images/Navigate_r12_c1.gif" width="100" height="7" border="0" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="7" border="0" alt=""></td>
</tr>
</table>
</body>
</html>

If you can tell me what to change so I can use the images directory or even better root/images/rollovers/XXX.gif it would be wonderful!

Thanks again, Mike

**jscheuer1** · 12-06-2005, 07:31 AM

Here is the most straightforward place to put the paths and filenames you desire:

Code:

<body bgcolor="#721fa2" onLoad="MM_preloadImages('images/Navigate_r2_c1_f2.gif','images/Navigate_r3_c1_f2.gif',images/Navigate_r4_c1_f2.gif','Navigate_r5_c1_f2.gif','Navigate_r7_c1_f2.gif','Navigate_r9_c1_f2.gif','Navigate_r11_c1_f2.gif');">

Simply substitute your image paths and filenames in the above, and they will be preloaded.

To actually use them in the rollovers, they (the image paths and filenames) will also need to be entered in the rollover code used in the various <a tags in the body section.

**14Peace** · 12-06-2005, 12:12 PM

That is what the problem is...the images won't load if I place them in the "images" directory and use the path "images/navigate_xxx.gif".

The images will only load if I place them in the directory above "images" which is where the HTML document is. It will also work if I put both the images and HTML page in the "images" directory. Why it doesn't work when they're each in different directories, is what I need to know?

Maybe it's not a script issue? Any other ideas?

Thanks, Mike

**jscheuer1** · 12-06-2005, 12:26 PM

Did you remember to change the image paths in the HTML section as well?

**14Peace** · 12-07-2005, 04:52 AM

I did and I believe they are correct. (They are as in the code I first posted.)The images are in "images" directory.

As it sits above, all images show as expected, except for those which are listed in the "onLoad="MM_preloadImages......."" statement.

I expected it to work just fine...is it possible for the problem to lie somewhere other that the code or HTML??? I'm quite perplexed.

Thanks, Mike

**jscheuer1** · 12-07-2005, 06:03 AM

Well it could depend upon where the images directory is in relation to the page. Consider this directory structure:

root:
page

/images:
Navigate_r2_c1_f2.gif

That is the structure described by your code. If it is instead something like so:

root:

/pages:
page
/images:
Navigate_r2_c1_f2.gif

Then your image in the code must reflect that and either be:

'/images/Navigate_r2_c1_f2.gif'

or

'http://www.somedomain.com/images/Navigate_r2_c1_f2.gif'

This last is the safest method and if that does not work, then there is some problem with the code, your images are not there, or your image or path names may be misspelled or may not be using the same capitalization. This last problem (agreement in capitalization) only makes a difference online. Is this a local and live or a live only problem?

**14Peace** · 12-07-2005, 12:18 PM

The directory structure is "root/Images/" and I've checked spelling and syntax. This is on a local machine, I haven't tried uploading it yet as it's still in development. I have no problems with any other images loading properly.

Does the code look correct to you?

Thanks, Mike

**jscheuer1** · 12-07-2005, 12:49 PM

But where is that in relation to the page? Give me drive/path/filename.ext of the page and drive/path/filename.ext of the image.

The code itself is overly complex for what it is doing. A simple preload function and rollover code would be much easier to debug but, there may be no need to rewrite it if it works. Until I can determine if the paths are correct, there is no need to worry about that as, incorrect paths will screw up simple code as well.

Thread: Images won't preload from directory I want to use?

Thread Tools

Search Thread

Images won't preload from directory I want to use?

Bookmarks

Bookmarks

Posting Permissions