Please Help Me Debug My Code

[jgbarber65]

I have thumbnails on a page. When a user hovers over a thumbnail, a larger image on the same page changes (it is just a larger version of the thumbnail). That is my intent anyway, but right now, when I hover over any thumbnail, the thumbnail changes to a blank image (image not found) and the the large image changes to a blank image also. I do not get any errors so it is hard to debug. I am sure it is simple. Here is the code and below that are the html tags that handle the mouseovers. Thank you.

<script language="javascript">
if (document.images) {
	var img1on = new Image();
	img1on.src = "1br_thumb01.png";
	var img2on = new Image();
	img2on.src = "1br_thumb02.png";	
	var img3on = new Image();
	img3on.src = "1br_thumb03.png";
	var img4on = new Image();
	img4on.src = "2br_thumb01.png";
	var img5on = new Image();
	img5on.src = "2br_thumb02.png";
	var img6on = new Image();
	img6on.src = "2br_thumb03.png";	
	var img7on = new Image();
	img7on.src = "2br_204thumb01.png";	
	var img8on = new Image();
	img8on.src = "2br_204thumb02.png";	
	var img1off = new Image();
	img1off.src = "1br_thumb01.png";
	var img2off = new Image();
	img2off.src = "1br_thumb02.png";	
	var img3off = new Image();
	img3off.src = "1br_thumb03.png";
	var img4off = new Image();
	img4off.src = "2br_thumb01.png";
	var img5off = new Image();
	img5off.src = "2br_thumb02.png";
	var img6off = new Image();
	img6off.src = "2br_thumb03.png";	
	var img7off = new Image();
	img7off.src = "2br_204thumb01.png";	
	var img8off = new Image();
	img8off.src = "2br_204thumb02.png";
	var img1banner = new Image();
	img1banner.src = "1br_01.png";
	var img2banner = new Image();
	img2banner.src = "1br_02.png";
	var img3banner = new Image();
	img3banner.src = "1br_03.png";	
	var img4banner = new Image();
	img4banner.src = "2br_01.png";		
	var img5banner = new Image();
	img5banner.src = "2br_02.png";	
	var img6banner = new Image();
	img6banner.src = "2br_03.png";
	var img7banner = new Image();
	img7banner.src = "2br_204_02.png";	
	var img8banner = new Image();
	img8banner.src = "2br_204_02.png";	
}
function imgOn(imgName) {
	if (document.images) {
		document.images[imgName].src = eval(imgName + "on.src");
		document.banner.src = eval(imgName + "banner.src");
	}
}
function imgOff(imgName) {
	if (document.images) {
		document.images[imgName].src = eval(imgName + "off.src");
		document.banner.src = "1br_01.png";
	}
}
</script>

<a href="" onmouseover="imgOn('img1');" onmouseout="imgOff('img1');"><img name="img1" border="0" src="4931/1007/images/1br_thumb01.png" width="100" height="75"></a>

<img name="banner" border="0" src="4931/1007/images/1br_01.png" width="601" height="450">