[Javascript] Image preloading script question (I didn't download it)...

Thu Jun 28 13:28:39 CDT 2001

This code was intended to preload the UnitImages, and the UnitNumber images.
When I mouseover one of the four "Swatch" images, the other two images are
supposed to change.  They do --- but every single time I mouseover any one
of the swatches, it appears that my connection is being used, indicating
that it may very well be preloading, but if it is, the preloaded images
aren't being used.  I'm confused.  Could you please take a look at this and
let me know if you see a problem?  Thank you!

<html>

<head>
<SCRIPT LANGUAGE="JavaScript1.1">
// Allocate memory for arrays to contain images
var UnitImages = new Array()
UnitImages[0] = new Image(120, 120)
UnitImages[1] = new Image(120, 120)
UnitImages[2] = new Image(120, 120)
UnitImages[3] = new Image(120, 120)
var UnitNumberImages = new Array()
UnitNumberImages[0] = new Image(70, 20)
UnitNumberImages[1] = new Image(70, 20)
UnitNumberImages[2] = new Image(70, 20)
UnitNumberImages[3] = new Image(70, 20)
// Preload images into array
UnitImages[0].src = "images/LJO1-471-0_Image.gif"
UnitImages[1].src = "images/LJO1-205-0_Image.gif"
UnitImages[2].src = "images/LJO1-MET-0_Image.gif"
UnitImages[3].src = "images/LJO1-295-0_Image.gif"
UnitNumberImages[0].src = "images/LJO1-471-0_Number.gif"
UnitNumberImages[1].src = "images/LJO1-205-0_Number.gif"
UnitNumberImages[2].src = "images/LJO1-MET-0_Number.gif"
UnitNumberImages[3].src = "images/LJO1-295-0_Number.gif"
// Function that swaps images when onMouseover event fires
function imageOn(i)
	{	document.images["Unit"].src = UnitImages[i].src;
		document.images["UnitNumber"].src = UnitNumberImages[i].src
}
</SCRIPT>
</head>

<body>

<table border="0">
	<tr>
		<td align="center">
			<img src="images/Swatch_471.gif" border="0"
width="20" height="20" onMouseOver="imageOn(0); return true">
		</td>
		<td align="center">
			<img src="images/Swatch_205.gif" border="0"
width="20" height="20" onMouseOver="imageOn(1); return true">
		</td>
		<td align="center">
			<img src="images/Swatch_MET.gif" border="0"
width="20" height="20" onMouseOver="imageOn(2); return true">
		</td>
		<td align="center">
			<img src="images/Swatch_295.gif" border="0"
width="20" height="20" onMouseOver="imageOn(3); return true">
		</td>
	</tr>
	<tr>
		<td align="center" colspan="4">
			<img name="UnitNumber" id="UnitNumber"
src="images/LJO1-471-0_Number.gif" border="0" width="70" height="20">
		</td>
	</tr>
	<tr>
		<td align="center" colspan="4">
			<img name"Unit" id="Unit"
src="images/LJO1-471-0_Image.gif" border="0" width="120" height="120">
		</td>
	</tr>
</table>

</body>

</html>