Re: crtics and testers wanted

Discussion in 'HTML' started by Richard, Jul 5, 2003.

  1. Richard

    Richard Guest

    "Richard" <anom@anom> wrote in message news:...
    > http://www.1-large-world.com/states/
    >
    > Let me know which browsers it won't work in.
    > Javascript menu so make sure it's on first.
    > When you first load it the entire listing appears in the far right table,
    > then when loaded only the first item appears.
    >
    > The beauty of this one is, I've got 150 images ranging from 3 to 10kb in
    > size and the entire document when loaded is now only 18kb or so.
    >
    > Any ideas for a background appreciated.
    > I also notice a few typos and those will get corrected.
    >
    > There will be more added in the future.
    >


    Included the style display none thing now and at least the images don't load
    all at once and display right away.
    What I'd like to do now is to avoid having all 150 images download upon
    opening.
    Only load what's needed on each click.
    Richard, Jul 5, 2003
    #1
    1. Advertising

  2. Richard

    Bagbourne Guest

    "Richard" <anom@anom> wrote in message news:...
    >
    > Included the style display none thing now and at least the images don't

    load
    > all at once and display right away.


    They do load all at once.

    > What I'd like to do now is to avoid having all 150 images download upon
    > opening.
    > Only load what's needed on each click.


    Yes, that's what you need to do. Add some javascript to create an image and
    add it to the stat's div on the fly. Do not code the <IMG> tag into the div,
    create it, and add it only when the user clicks on that state.

    Because of the repetetive nature of the data, you can generate most if not
    all of it with Javascript. Put the data into an array, and use
    document.createElement() and document.createTextNode() calls to generate the
    whole lot...

    Of course you have to have your images named consistently they ALL have to
    be "xx-flag.gif" ot whatever naming scheme you use. Obviously you wouldn't
    include the whole URL of the image, I did in my test because they were on
    your site.

    Have a play around with this for a start:

    <html>
    <head>
    <style type="text/css">

    ..flag {
    height:100px;
    width:120px;
    }

    ..seal {
    height:100px
    }

    </style>
    <script type="text/javascript" src="jscript/utils.js"></script>
    <script type="text/javascript">
    displayedState = null;
    function createStateImage(state)
    {
    if (displayedState != null)
    {
    displayedState.style.display = "none";
    }
    displayedState = document.getElementById(state);
    if (displayedState == null)
    {
    alert('Author has not set up <div id="' + state + '">');
    return false;
    }
    if (typeof displayedState.imagesSet == "undefined")
    {
    var gov = new Image();
    gov.src = "http://www.1-large-world.com/states/" + state + "-gov.jpg";
    var flag = new Image();
    flag.className = "flag";
    flag.src = "http://www.1-large-world.com/states/" + state + "-flag2.gif";
    var seal = new Image();
    seal.className = "seal";
    seal.src = "http://www.1-large-world.com/states/" + state + "-seal.gif";
    document.getElementById(state + "gov").appendChild(gov);
    document.getElementById(state + "flag").appendChild(flag);
    document.getElementById(state + "seal").appendChild(seal);
    displayedState.imagesSet = "true";
    }
    displayedState.style.display = (displayedState.style.display == "none") ?
    "" : "none";
    }
    </script>
    </head>
    <body>
    <table border="1" style="height:400px">
    <tr>
    <td id="menu0">
    </td>
    <td id="menu1">
    </td>
    <td valign="top" style="width:500px">
    <div id="al" style="display:none">
    <h2>Alabama</h2>
    <table>
    <tr>
    <td>Governor <br>Bob Riley</td>
    <td id="algov"></td>
    <td class="flag" id="alflag"></td>
    <td class="seal" id="alseal"></td>
    </tr>
    </table>
    </div>
    <div id="ak" style="display:none">
    <h2>Arkansas</h2>
    <table>
    <tr>
    <td>Governor <br>Bill Clinton</td>
    <td id="akgov"></td>
    <td class="flag" id="akflag"></td>
    <td class="seal" id="akseal"></td>
    </tr>
    </table>
    </div>
    <div id="co" style="display:none">
    <h2>Colorado</h2>
    <table>
    <tr>
    <td>Governor <br>Bob Riley</td>
    <td id="cogov"></td>
    <td class="flag" id="coflag"></td>
    <td class="seal" id="coseal"></td>
    </tr>
    </table>
    </div>
    </td>
    </tr>
    </table>
    <!--

    etc.......

    -->
    </body>
    <script type="text/javascript">
    /*
    Build the array of links and add them to column 0 or column 1
    */
    var stateCodes = "al/ak/co/az".split("/");
    var stateNames = "Alabama/Arkansas/Colorado/Arizona".split("/");
    var s
    var i = 0;
    for (s in stateCodes)
    {
    var menu = document.getElementById("menu" + ((i < 25) ? "0" : "1"));
    var link = document.createElement("a");
    link.style.display = "block";
    link.onclick = new Function("", "createStateImage('" + stateCodes + "');
    return false;");
    link.href = "#";
    link.appendChild(document.createTextNode(stateNames));
    menu.appendChild(link);
    i++;
    }
    </script>
    </html>
    Bagbourne, Jul 5, 2003
    #2
    1. Advertising

  3. Richard

    Richard Guest

    "Bagbourne" <> wrote in message
    news:be5tm9$ch7$...
    > "Richard" <anom@anom> wrote in message

    news:...
    > >
    > > Included the style display none thing now and at least the images don't

    > load
    > > all at once and display right away.

    >
    > They do load all at once.
    >
    > > What I'd like to do now is to avoid having all 150 images download upon
    > > opening.
    > > Only load what's needed on each click.

    >
    > Yes, that's what you need to do. Add some javascript to create an image

    and
    > add it to the stat's div on the fly. Do not code the <IMG> tag into the

    div,
    > create it, and add it only when the user clicks on that state.
    >
    > Because of the repetetive nature of the data, you can generate most if not
    > all of it with Javascript. Put the data into an array, and use
    > document.createElement() and document.createTextNode() calls to generate

    the
    > whole lot...
    >
    > Of course you have to have your images named consistently they ALL have to
    > be "xx-flag.gif" ot whatever naming scheme you use. Obviously you wouldn't
    > include the whole URL of the image, I did in my test because they were on
    > your site.



    Thanks. I'll try that out and see what happens.
    It's a lot easier to give a working example rather than try to explain it.
    Richard, Jul 5, 2003
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Bagbourne

    Re: crtics and testers wanted

    Bagbourne, Jul 5, 2003, in forum: HTML
    Replies:
    1
    Views:
    374
    Richard
    Jul 5, 2003
  2. Beauregard T. Shagnasty

    Re: crtics and testers wanted

    Beauregard T. Shagnasty, Jul 5, 2003, in forum: HTML
    Replies:
    0
    Views:
    361
    Beauregard T. Shagnasty
    Jul 5, 2003
  3. Hywel Jenkins

    Re: crtics and testers wanted

    Hywel Jenkins, Jul 5, 2003, in forum: HTML
    Replies:
    0
    Views:
    361
    Hywel Jenkins
    Jul 5, 2003
  4. Jacqui or (maybe) Pete

    Re: crtics and testers wanted

    Jacqui or (maybe) Pete, Jul 5, 2003, in forum: HTML
    Replies:
    4
    Views:
    388
    Richard
    Jul 5, 2003
  5. spaghetti

    Re: crtics and testers wanted

    spaghetti, Jul 5, 2003, in forum: HTML
    Replies:
    2
    Views:
    368
    spaghetti
    Jul 7, 2003
Loading...

Share This Page