[javascript] loop problem with if statement - Webmaster Forum - Web Design, Programming and SEO forums

11-14-2007, 12:40 AM

Nightscream

Status: Junior Member
Join date: Aug 2006
Location:
Expertise:
Software:

Posts: 58

iTrader: 0 / 0%

Nightscream is on a distinguished road

[javascript] loop problem with if statement

Well my javascript function works fine until image[09] but when greater then 10 it doesn't work anymore. Any suggestions?

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/javascript">
var MaxThumb = 15;

var images = Array();

function preLoad() {
	var i;
	for(i = 10; i < MaxThumb; i++) {
		var image, imageI, bigImage;
		imageI = i + 1;
		
		if(i < 10) {
			image = document.getElementById("image[0"+ imageI +"]");
		}else {
			image = document.getElementById("image["+ imageI +"]");
		}
		
		if(i < 10) {
			bigImage = image.src.substring(0, image.src.indexOf("_")-1);
		}else {
			bigImage = image.src.substring(0, image.src.indexOf("_")-2);
		}
				
		bigImage += (i+1) +".jpg";
		
		images[i] = new Image
		images[i] = bigImage;
	}
}
function show_image(num) {
	document.getElementById("FullSize").src = images[num];
}
</script>

<style type="text/css">
a {
	border: 0;
	text-decoration: none;
}
img {
	border: 0;
}
</style>
</head>

<body onLoad="preLoad()">
<table width="730" cellpadding="0" cellspacing="5">
	<tr>
		<td><a href="#" onclick="show_image(0)"><img src="image01_thumb.jpg" width="100" height="100" id="image[01]" /></a></td>
		<td><a href="#" onClick="show_image(1)"><img src="image02_thumb.jpg" width="100" height="100" id="image[02]" /></a></td>
		<td><a href="#" onClick="show_image(2)"><img src="image03_thumb.jpg" width="100" height="100" id="image[03]" /></a></td>
		<td><a href="#" onClick="show_image(3)"><img src="image04_thumb.jpg" width="100" height="100" id="image[04]" /></a></td>
		<td width="300" rowspan="3"><img src="#" name="FullSize" width="300" height="300" id="FullSize" /></td>
	</tr>
	<tr>
		<td><a href="#" onClick="show_image(4)"><img src="image05_thumb.jpg" width="100" height="100" id="image[05]" /></a></td>
		<td><a href="#" onClick="show_image(5)"><img src="image06_thumb.jpg" width="100" height="100" id="image[06]" /></a></td>
		<td><a href="#" onClick="show_image(6)"><img src="image07_thumb.jpg" width="100" height="100" id="image[07]" /></a></td>
		<td><a href="#" onClick="show_image(7)"><img src="image08_thumb.jpg" width="100" height="100" id="image[08]" /></a></td>
	</tr>
	<tr>
		<td><a href="#" onClick="show_image(8)"><img src="image09_thumb.jpg" width="100" height="100" id="image[09]" /></a></td>
		<td><a href="#" onClick="show_image(9)"><img src="image10_thumb.jpg" width="100" height="100" id="image[10]" /></a></td>
		<td><a href="#" onClick="show_image(10)"><img src="image11_thumb.jpg" width="100" height="100" id="image[11]" /></a></td>
		<td><a href="#" onClick="show_image(11)"><img src="image12_thumb.jpg" width="100" height="100" id="image[12]" /></a></td>
	</tr>
</table>
</body>
</html>