Results 1 to 3 of 3

Thread: Images with Switch Menu II

  1. #1
    Join Date
    Feb 2006
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Images with Switch Menu II

    This questions refers to this script

    http://www.dynamicdrive.com/dynamici...witchmenu2.htm



    Instead of using text I wanted to use an image and make it a link

    This was no issue. The pics and links work fine. But there is one issue. Until the images load it messes up the menus

    Once the images have loaded (and they aren't very big) you can click to close the menu tree and click to open it and it all looks great

    Two questions, would preloading the images help it any. And if so how to write a script. I tried to do a script modifying other preloads but failed.

    If anyone can tell me if this is possible let me know

    So basically all I did was substitute an image (which is a clickable link) for the text in the original script (which is a clickable link)

    And as I said once the images are fully loaded the script runs great. Just wondering if the preloading would help it

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    This generally works:

    Code:
    <script type="text/javascript">
    var ims, preloadedimages;
    function setItUp(){
    if(document.getElementById&&document.images){
    document.write('<style type="text/css">\
    #someID {\
    visibility:hidden;\
    }\
    <\/style>')
    
    ims=new Array()
    //define images. You can have as many as you want:
    ims[0]="image1.jpg"
    ims[1]="image2.jpg"
    ims[2]="image3.jpg"
    
    preloadedimages=new Array()
    for (var i=0;i<ims.length;i++){
    preloadedimages[i]=new Image()
    preloadedimages[i].src=ims[i]
    }
    }
    }
    setItUp();
    
    function reveal(){
    if(!document.images||!document.getElementById)
    return;
    for (var i_tem = 0; i_tem < preloadedimages.length; i_tem++)
    if (typeof preloadedimages[i_tem].complete=='boolean'&&!preloadedimages[i_tem].complete){
    setTimeout("reveal();", 2000)
    return;
    }
    document.getElementById('someID').style.visibility='visible';
    }
    </script>
    Configure your images in the above where indicated.

    Wrap the problematic HTML code on your page that requires the images be loaded in a div:

    Code:
    <div id="someID">
    
    Problematic HTML goes here
    
    </div>
    Add reveal(); to your page's onload event(s).
    Last edited by jscheuer1; 05-24-2006 at 06:29 AM.
    - John
    ________________________

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

  3. #3
    Join Date
    Feb 2006
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks worked great

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
  •