<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 max = 20; // 連番画像の数
window.onload = function() {
if (!document.createElement || !document.getElementById) return;
for (var i = 1; i <= max; i++) {
// アンカーの生成
var a = document.createElement("a");
a.href = "javascript:album(" + i + ");";
// 表示する番号の生成
var num = (i < 10) ? "0" + i : i;
a.appendChild(document.createTextNode("[" + num + "]"));
// 区切りをつける
var delimit = (i % 10 == 0) ? document.createElement("br") : document.createTextNode(" ");
a.appendChild(delimit);
// 上記を連番画像の数だけ追加する
document.getElementById("view").appendChild(a);
}
}
function album(a) {
var num = parseInt(a);
if (num && num >= 1 && num <= max) {
if (num < 10) num = "0" + num;
document.pic.src = "./image/hamu" + num + ".jpg"; // 番号以外の画像ファイルのパスと拡張子
document.pic.alt = "No." + num;
}
}
// -->
</script>
</head>
<body>
<div align="center" id="view">
<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="./image/hamu01.jpg" width="80" height="60" border="0" alt="" name="pic"></td>
</tr>
</table>
</div>
</body>
</html>
 |
同じ大きさの連番のファイル名の画像（01.jpg 〜 20.jpg のような）を用意します。ここでは image というディレクトリにある hamu01.jpg 〜 hamu20.jpg という名前の画像20枚を使って説明します。
変数 max に連番画像の最大数を記述してください。次に、スクリプト終盤にある document.pic.src に番号以外の画像のパスとファイル名と拡張子を記述してください。最後に青文字の img タグに最初に表示したい画像を指定しておきます。
ページが読み込まれると連番画像を切り替えるリンクを生成します。この生成したリンクは10個単位で改行して表示され、view という id 名の最後に追加されます。
この生成されたリンクをクリックすると関数 album に引数付きの値が渡されます。この引数 a は整数値として変数 num に代入されます。連番が0〜9の場合は、表示する連番画像のファイル名が hamu01.jpg hamu02.jpg ... hamu09.jpg となっていますので、変数 num に 0 を追加します。この変数 num を連番の番号として当てはめて画像を表示します。