Hover on any of the images to the left to change the larger image to the right. This method makes use of an old JavaScript technique that preloads the images it uses and loads a larger image using the onMouseOver and onMouseOut methods.

The Markup

<div id="thmbs">
	<img src="images/flowers.jpg" 
		onMouseOver="swap(1, 'imgDefault')" 
		onMouseOut="swap(0,'imgDefault')" >
	<img src="images/leaf.jpg" 
		onMouseOver="swap(2, 'imgDefault')" 
		onMouseOut="swap(0, 'imgDefault')">
	<img src="images/cat.jpg" 
		onMouseOver="swap(3, 'imgDefault')" 
		onMouseOut="swap(0, 'imgDefault')">
</div>
<div id="target">
	<img name="imgDefault" src="images/default.gif" >
</div>

The Script

<SCRIPT LANGUAGE="JavaScript">

  var aryImages = new Array(2);

  aryImages[0] = "images/default.gif";
	aryImages[1] = "images/flowers_LRG.jpg";
  aryImages[2] = "images/leaf_LRG.jpg";
	aryImages[3] = "images/cat_LRG.jpg";

  for (i=0; i < aryImages.length; i++) {
    var preload = new Image();
    preload.src = aryImages[i];
  }

  function swap(imgIndex, imgTarget) {
    document[imgTarget].src = aryImages[imgIndex];
  }
</script>