My Problem:
The layout I use on my personal site is created by making certain divisions visible/invisible with Javascript and CSS. As a result, the entire source code for my site is actually on one page. This isn't really an issue, except that the images on my Pictures division all load as soon as someone opens my site, which slows load time.

My Question:
Isn't there a way to stop these images from loading until someone uses an onClick() object?

(My site: http://home.ripway.com/2004-10/183524/index.html)

Thank you so much.

I've suddenly realized that posting my URL may be forbidden, and I am terribly sorry if it is. (I cannot remember...)

Nope if they are on the page they get loaded. You can use the onclick to load the image but the user would then have to wait until the image loaded.

The only trick I can think of off the top of my head would be to have all the images on the various layers initially set to a small transparent gif. Then when the visitor to your site uses the OnClick() you can simply swap the relevant image sources for the correct ones in much the same way you would with a mouse rollover.

Of course you'll need to make sure that each layer has it's own relevant chunk of JS to handle all this. Lets say you have a layer called 'layer1', and I will assume that you have a JS function to make the layer visible, so Iwon't go into that. Your OnClick() will look something like:

.... onClick="make_visible(1)"; ...

You will then need to add image swapping code to the end of the function I have called 'make-visible' for the sake of example. Notice that I have called the function simply with a number, this is to make the image swapping easier. I am sure you can handle this for the visibility part of your function. In addition to the extra code at the end of your function you will need an array containing a list of numbers of how many images are contained in each layer, and then will need to name the images accordingly - the code below should help you.

imgs_in_layer = array (5,3,6,4); // 4 layers numbered 0, 1, 2 and 3
function make_visible(which_layer) {
// your original code here to make the layer visible
    howmany_images = imgs_in_layer[which_layer];
    for (n=0; n<howmany_images; n++) {
        img = "images/layer"+which_layer+"_"+n+".jpg";
        document.images['layer'+which_layer+n].src = img;
    }
}

I hope that's clear enough. It should work, but I had a heavy night last night and my mind might still be a bit scrambled!