Change code to load 1 image then....

I'm using the below code to work as a photogallery however it loads all LARGE images into the cache, how could I change this that it loads the 1st only and then waits till one of the thumbnails has been clicked to then load that LARGE image?

Thanks Ian

<script language="JavaScript">
<!--
document.write('<p>YOUR PICTURE GALLERY IS NOW LOADING...</p>')
//-->
</script>
<!-- this is like this because of html rendering oddity in firefox -->
<div align="center" id="picGalleryNoScript_0" style="display: none; visibility: hidden;">
<div align="center">
<p align="center"><img height="225" id="picture_0" width="300" alt="Los Reyes magos in Sanlucar" src="images/01.jpg"></p>
</div>
<script language="JavaScript">
<!--
document.getElementById('picGalleryNoScript_0').style.display = 'none';
//-->
</script>
<p align="center" class="textform">The crowds await
the arrival of the procession in Sanlucar de Barrameda.</p>
</div>
<div align="center" id="picGalleryNoScript_1" style="display: none; visibility: hidden;">
<div align="center">
<p align="center"><img height="225" id="picture_1" width="300" alt="Los Reyes floats arrive" src="images/02.jpg"></p>
</div>
<script language="JavaScript">
<!--
document.getElementById('picGalleryNoScript_1').style.display = 'none';
//-->
</script>
<p>One of the first  floats arrive.</p>
</div>
<!—THUMBNAILS  -->
<div align="center">
<a id="pictureLink_0" onclick="showDiv(0);return false;" href="#"><img src="image2.gif"></a>&nbsp;
<a id="pictureLink_1" onclick="showDiv(1);return false;" href="#"><img src="image.gif"></a>
</div>
<script language="javascript">
    <!--
        var hasLoaded = false;
	//constants
        var NUMBER_OF_PICTURES = 2;

        var PICTURES_ID_PREFIX = "picGalleryNoScript_";

	var PICTURES_LINK_ID_PREFIX = "pictureLink_";
        
	var currentPic = 0;

	//var LOADING_DIV = "picGallery_loading";

        function init() {

            hasLoaded = true;

            showDiv(0);

            if (NUMBER_OF_PICTURES > 1) {

                //document.getElementById(LOADING_DIV).style.display='none';

                document.getElementById(PICTURES_LINK_ID_PREFIX + currentPic)
            }

        }

        function showDiv(nDiv) {	

            for(var i = 0; i < NUMBER_OF_PICTURES; i++) {

		if (NUMBER_OF_PICTURES > 1) {

                    document.getElementById(PICTURES_LINK_ID_PREFIX + i)
		}

                var buttonid = i;

                var id = PICTURES_ID_PREFIX + i;	

                var node = document.getElementById(id);

                if(node && i==nDiv) {

                    node.style.display='block';		

                    node.style.visibility='visible';						

                    currentPic = i;

                    if (NUMBER_OF_PICTURES > 1) {

                        document.getElementById(PICTURES_LINK_ID_PREFIX + currentPic)
                    }

                } else if(node) {

                    node.style.display='none';

                    node.style.visibility='hidden';
                }		
            }
        }

	if (document.getElementById) {
		document.onLoad = init();
	}
    //-->
</script>

HTML:

 

an image has an oncomplete method, so what you could do is as each thumb is loaded use onComplete() to call another function that loads the next image each. You can search for onComplete() at google

Eddie
http://dhtmlnirvana.com/

 

hello eddie trabersa

see the below code :

<div align="center" id="picGalleryNoScript_0" style="display: none; visibility: hidden;">
<div align="center">
<p align="center"><img height="225" id="picture_0" width="300" alt="Los Reyes magos in Sanlucar" src="images/01.jpg"></p>
</div>

in case hidden image is used so this is spam or black hat tech.. ? it's effect on search engine ranking

p'se reply ASAP