<html><head>
<script type='text/javascript'>
<!--
function imgclick(image) {
document.getElementById('bigimg').src="imagelibrary/"+image+'big.jpg';
document.getElementById('linkimg').href="/root/path/"+image+".html";
}
-->
</script>
</head><body>
<img src="imagelibrary/dazzlethumb.jpg" onclick="imgclick('dazzle');" border="5" />
<img src="imagelibrary/gunshotthumb.jpg" onclick="imgclick('gunshot');" border="5" />
<img src="imagelibrary/searoomthumb.jpg" onclick="imgclick('searoom');" border="5" />
<img src="imagelibrary/smokethumb.jpg" onclick="imgclick('smoke');" border="5" />
<br>
<a href='#' id='linkimg'><img src="imagelibrary/dazzlebig.jpg" id="bigimg" width="320" border="0" /></a>
</body>
<script type="text/javascript">
<!--
image1 = new Image();
image1.src = "imagelibrary/dazzlebig.jpg";
image2 = new Image();
image2.src = "imagelibrary/gunshotbig.jpg";
image3 = new Image();
image3.src = "imagelibrary/searoombig.jpg";
image4 = new Image();
image4.src = "imagelibrary/smokebig.jpg";
-->
</script>
</html>the initial javsacript makes the requested links and image changes
the second javascript between </body> and </html> preloads the larger images to tif after the page is loaded and functioning without displaying any, gives an apparent speed increase over images in a div with display:none, load time is not changed, but the page becomes functional before all the images are loaded
the link href makes the assumption that /root/path will be repaced by the right path and that the filename convention established with thumb-big has been continued to the html filename