i am trying to make a simple gallery for images of mine because i havent found any that i like. optimally i would like a page full of thumbnails. when you click one of them it changes to the bigger picture of it. and when you click it again it goes back to the thumbnail. i know nothing about javascript, and his was hacked together to get sorta the effect i want. on the click it loads/replaces with the big one, and on double (i'd prefer another single click) click it goes back. thank you very much

Code:
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript">
function image(){
onclick="this.src='fish.jpg'; img2.src='thumb.jpg'; img3.src='thumb.jpg'; img4.src='thumb.jpg'; img5.src='thumb.jpg'; img6.src='thumb.jpg'; img7.src='thumb.jpg'; img8.src='thumb.jpg';" ondblclick="this.src='thumb.jpg';" 
}

</script>
</head>

<body>

<div id="layer1" style="position: absolute; width: 750px; height: 10000px; z-index: 1; background-color: #C0C0C0;">
	<img id="img1" onclick="this.src='fish.jpg'; img2.src='thumb.jpg'; img3.src='thumb.jpg'; img4.src='thumb.jpg'; img5.src='thumb.jpg'; img6.src='thumb.jpg'; img7.src='thumb.jpg'; img8.src='thumb.jpg';" ondblclick="this.src='thumb.jpg';" src="thumb.jpg" />
	<img id="img2" onclick="this.src='fish.jpg'; img1.src='thumb.jpg'; img3.src='thumb.jpg'; img4.src='thumb.jpg'; img5.src='thumb.jpg'; img6.src='thumb.jpg'; img7.src='thumb.jpg'; img8.src='thumb.jpg';" ondblclick="this.src='thumb.jpg';" src="thumb.jpg" />
	<img id="img3" onclick="this.src='fish.jpg'; img1.src='thumb.jpg'; img2.src='thumb.jpg'; img4.src='thumb.jpg'; img5.src='thumb.jpg'; img6.src='thumb.jpg'; img7.src='thumb.jpg'; img8.src='thumb.jpg';" ondblclick="this.src='thumb.jpg';" src="thumb.jpg" />
	<img id="img4" onclick="this.src='fish.jpg'; img1.src='thumb.jpg'; img2.src='thumb.jpg'; img3.src='thumb.jpg'; img5.src='thumb.jpg'; img6.src='thumb.jpg'; img7.src='thumb.jpg'; img8.src='thumb.jpg';" ondblclick="this.src='thumb.jpg';" src="thumb.jpg" />
	<img id="img5" onclick="this.src='fish.jpg'; img1.src='thumb.jpg'; img2.src='thumb.jpg'; img3.src='thumb.jpg'; img4.src='thumb.jpg'; img6.src='thumb.jpg'; img7.src='thumb.jpg'; img8.src='thumb.jpg';" ondblclick="this.src='thumb.jpg';" src="thumb.jpg" />
	<img id="img6" onclick="this.src='fish.jpg'; img1.src='thumb.jpg'; img2.src='thumb.jpg'; img3.src='thumb.jpg'; img4.src='thumb.jpg'; img5.src='thumb.jpg'; img7.src='thumb.jpg'; img8.src='thumb.jpg';" ondblclick="this.src='thumb.jpg';" src="thumb.jpg" />
	<img id="img7" onclick="this.src='fish.jpg'; img1.src='thumb.jpg'; img2.src='thumb.jpg'; img3.src='thumb.jpg'; img4.src='thumb.jpg'; img5.src='thumb.jpg'; img6.src='thumb.jpg'; img8.src='thumb.jpg';" ondblclick="this.src='thumb.jpg';" src="thumb.jpg" />
	<img id="img8" onclick="this.src='fish.jpg'; img1.src='thumb.jpg'; img2.src='thumb.jpg'; img3.src='thumb.jpg'; img4.src='thumb.jpg'; img5.src='thumb.jpg'; img6.src='thumb.jpg'; img7.src='thumb.jpg';" ondblclick="this.src='thumb.jpg';" src="thumb.jpg" />
</div>

</body>

</html>