PDA

View Full Version : 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;">
<!-- Fireworks MX Dreamweaver MX target. Created Sun Dec 04 20:04:42 GMT-0500 (Eastern Standard Time) 2005-->
<script language="JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

//-->
</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">
<!-- fwtable fwsrc="Untitled" fwbase="Navigate.gif" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" -->
<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:


<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.

14Peace
12-08-2005, 01:55 AM
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 page sits in the "root" directory and the images are in the "images" directory, inside the "root". The "root" directory resides on drive G: of the local computer. So we have G:/root/images/file1.gif, file2.gif, file3.gif and etc.

The HTML pages all reside in the "root" directory.

IF I place the images that are to preload in the "root" directory along with the HTML page(s), they will load just fine.

IF I place the HTML page in the "images" directory the preload images load fine. Note: if I also adjust the source path accordingly for the other images, all will work fine.

In other words...nothing I try will get the preloaded images from a directory outside of the one where the images themselves reside.

If you need the actual image file names, they are as in my above post listing the HTML and javascript as it was copied from the actual web page.

Thanks, Mike

jscheuer1
12-08-2005, 07:34 AM
Well, in your code I just noticed a missing single quote (') highlighted red below in the train of images to be preloaded from your body tag:


('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')

No preloading will occur if the above is not corrected, it may also break all scripts on the page. Also, looking back over things, you say the name of the image directory is:

Images

yet, you have used:

images

in your code, this will matter live and may matter locally, depending upon how you are testing.

Another thing, if I copy your code to my editor and do a search on each path/filename.ext listed in the body tag as images to preload, none of them appear anywhere else in the code. After testing MM_swapImage() locally here on a single swap/restore, it is clear that the full path and filename must be used for the replacement image. In other words, this (and similar) needs the path, where I've added it in red:


<a href="home.html" target="_self" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('Navigate_r2_c1','','images/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>

Another way to understand this would be if I showed you my local demo that I used for testing. I used exactly what you have posted up to, but not including the body tag, then I substituted for it and the rest of the page this:


<body bgcolor="#721fa2" onLoad="MM_preloadImages('images/back.jpg');">
<table border="0" cellpadding="0" cellspacing="0" width="100">
<!-- fwtable fwsrc="Untitled" fwbase="Navigate.gif" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" -->

<tr>
<td><a href="home.html" target="_self" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('Navigate_r2_c1','','images/back.jpg',1);"><img name="Navigate_r2_c1" src="images/next.jpg" width="100" height="37" border="0" alt="Home"></a></td>
</tr>
</table>
</body>
</html>

Worked just fine here from a directory 1 level below the images directory.


Notes: All in all this code is way more complicated than it needs to be and uses inappropriate camel style notation (onMouseOver should be onmouseover, for example) in places but, if you give it what it is expecting, it will work. Some of the camel style notation is required, so don't change any of it unless you know which ones are inappropriate and which are required.

Added:

It strikes me that the preloading would make more sense if it were not an onload event. You want your images preloaded before the rest of the page, that is the meaning of the term. To achieve this, simply change things around a little. Using my local demo as a model (don't try this until you get it working using the original method):


MM_preloadImages('images/back.jpg');
//-->
</script>
</head>
<body bgcolor="#721fa2">

That way the images preload as the page is loading and will more likely be available once the page is loaded than the way it was first written. Even better would be to preload the images on a previous, page if there is one.

14Peace
12-22-2005, 03:36 AM
You were kind enough to reply to my posts and you did find the solution to my problem. Then I left town thinking I had posted my thanks on the forum. Today I see I had not, and for this I apologize. Thank you for your time, it was a path issue were the rollover image was listed after the "preload" statement. Thanks again for finding that and passing it on, all works as planned now.

Sincerely, Mike (14Peace)