ミニアルバム

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
var list = new Array();
list[0] = "./image/hamu01.jpg";		// 画像ファイルのパス
list[1] = "./image/hamu02.jpg";
list[2] = "./image/hamu03.jpg";
list[3] = "./image/hamu04.jpg";
list[4] = "./image/hamu05.jpg";
list[5] = "./image/hamu06.jpg";
list[6] = "./image/hamu07.jpg";
list[7] = "./image/hamu08.jpg";
list[8] = "./image/hamu09.jpg";
list[9] = "./image/hamu10.jpg";

for (var i in list) {
	var img = new Image();		// for (var i = 0 ; i < list.length ; i++) {...} と同様
	img.src = list[i];		// キャッシュしないのであればこの部分は不要です
}
function album(a) {
	document.pic.alt = document.pic.src = list[a];
}
// -->
</script>
</head>
<body>
<div align="center">
<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="./image/hamu01.jpg" width="80" height="60" border="0" alt="" name="pic"></td>
</tr>
</table>
<form action="#">
<input type="button" value=" 1 " onclick="album(0);">
<input type="button" value=" 2 " onclick="album(1);">
<input type="button" value=" 3 " onclick="album(2);">
<input type="button" value=" 4 " onclick="album(3);">
<input type="button" value=" 5 " onclick="album(4);">
<input type="button" value=" 6 " onclick="album(5);">
<input type="button" value=" 7 " onclick="album(6);">
<input type="button" value=" 8 " onclick="album(7);">
<input type="button" value=" 9 " onclick="album(8);">
<input type="button" value="10" onclick="album(9);">
</form>
</div>
</body>
</html>

まず、画像ファイル分の配列を作ります。配列（変数 list）に表示したい画像のパスを定義しておきます。

次に、青文字の img タグに最初に表示したい画像を指定しておきます。さらに画像を切り替えるためにボタンを作成してそのボタンで表示したい画像の配列番号を album(?) に引数として指定してください。

表示する画像は配列で作られていますので、引数 a を list[a] に当てはめて配列番号を取得することができます。つまり、onclick="album(0);" ならば list[0] の "./image/hamu01.jpg" が img タグの name 属性を付けたところに表示されます。

これは、document.変更したい要素の名前.src = 表示する画像のパスということになります。

画像ファイルの大きさ (width, height) が同じものでないと大きさが変化しますが、img タグ内で大きさをあらかじめ指定しておけばその大きさで表示されます。できれば同じ大きさの画像をおすすめします。

ミニアルバム

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
// 表示する画像のパス
var list = new Array(
	"./image/hamu01.jpg",
	"./image/hamu02.jpg",
	"./image/hamu03.jpg",
	"./image/hamu04.jpg",
	"./image/hamu05.jpg",
	"./image/hamu06.jpg",
	"./image/hamu07.jpg",
	"./image/hamu08.jpg",
	"./image/hamu09.jpg",
	"./image/hamu10.jpg"
);

window.onload = function() {
	if (!document.createElement || !document.getElementById) return;

	var myform = document.createElement("form");
	for (var i = 0; i < list.length; i++) {
		var num = i + 1;			// 表示するボタンの番号
		new Image().src = list[i];

		// ボタンを生成
		var ele = document.createElement("input");
		ele.type = "button";
		ele.value = num;
		ele.onclick = album;
		myform.appendChild(ele);

		// ボタンの番号が10の倍数は改行、それ以外は空白をあける
		var delimit = (num % 10 == 0) ? document.createElement("br") : document.createTextNode(" ");
		myform.appendChild(delimit);
	}
	document.getElementById("view").appendChild(myform);
}
function album() {
	var num = this.value;				// クリックされたボタンの番号
	if (num) document.pic.alt = document.pic.src = list[--num];
}
// -->
</script>
</head>
<body>
<div align="center" id="view">
<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="./image/hamu23.jpg" width="80" height="60" border="0" alt="" name="pic"></td>
</tr>
</table>
</div>
</body>
</html>

初めのミニアルバムと同様ですが、こちらは配列に定義されている画像の分だけ画像切り替えのボタンを自動生成しますので、画像が増えた時に切り替えるボタンを記述しなくても増えた画像のパスを配列に追加するだけで良いです。

たくさん増えた時のためにボタンを10個ずつ表示して改行します。もし1列に5個ずつ表示したい場合は (num % 5 == 0) としてください。

表示するときにはクリックされたボタンの番号を取得します。この番号は実際に表示する画像の配列番号より1つ少ない番号なので、デクリメントした値を配列として代入して表示します。