Page 1 of 2 12 LastLast
Results 1 to 10 of 13

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

  1. #1
    Join Date
    Dec 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,239 Times in 3,200 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by 14Peace; 12-07-2005 at 04:43 AM.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,239 Times in 3,200 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Dec 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,239 Times in 3,200 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Dec 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,239 Times in 3,200 Posts
    Blog Entries
    12

    Default

    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?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Dec 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,239 Times in 3,200 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 12-07-2005 at 12:55 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •