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 = 0; 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>