JavaScriptでサムネイルを原寸表示

s1 s2 s3 s4

フレームを使わずに同一ページで画像のサムネイルを置いてクリックすると 原寸大表示する方法です。 写真やCG、イラスト等を展示したり、壁紙やホームページ用素材等の配布ページに 使えそうです。

左上の4枚の小さな画像をクリックしてください。下に原寸大で表示されます。

先ず、それぞれの画像のサムネイル(縮小画像)を作成してください。 サムネイルを使わずに画像を縮小表示する方法もありますが、これは原寸の画像を 見るつもりのないものまで読み込んでブラウザが小さく表示しているだけですので、 必然的にページの表示が遅くなります。 折角見に来て貰っても、ページが重いために表示されるまでにイライラして 閉じてしまい、結局見て貰えなかったという事にもなってしまいます。

ただ、元々画像の容量が小さく、数も少ない場合はサムネイルを使わなくても 良いでしょう。 サムネイルを使うか否かは見る側の立場で考えて判断してください。

2007/03/12 JavaScriptが無効な環境では画像が直接表示されるようマークアップを 変更しました。(コメントまでは表示出来ませんが)

imgタグを生成し、viewというidを持つ要素の中に画像を付加するJavaScriptです。 サムネイルを使う場合も使わない場合も、このスクリプトを使用します。 通常<head>〜</head>の中に置いてください。
<script type="text/javascript"><!--
function setimg(image,text) {
 var view=document.getElementById("view");
 var cnl=view.childNodes.length;
 for (var i=0; i < cnl; i++) view.removeChild(view.lastChild);
 var im=document.createElement("img");
 im.setAttribute("src",image);
 im.setAttribute("alt",image);
 im.style.margin="2px 0px";
 view.appendChild(im);
 var lb=document.createElement("br");
 view.appendChild(lb);
 if (text) {
  var textdata=document.createElement("span");
  textdata.innerHTML=text;
  view.appendChild(textdata);
 }
}
// --></script>

参考までに、このスクリプトで画像が表示されたとき <div id="view"></div>の内容は以下のように生成されます。
<div id="view">
<img src="画像ファイル名" alt="画像ファイル名" style="margin:2px 0px">
<br>
<span>コメント</span>
</div>
※ 生成される内容は改行して記載していますが実際は改行コードは入りません。
※ 手抜きですのでalt属性の値にも画像ファイル名を指定しています。

サムネイル画像はimgタグのsrc属性で指定し、原寸の画像はa要素のhref属性で 指定します。(s1.png〜s4.pngは原寸、s1_t.png〜s4_t.pngがサムネイルです) <div id="view"></div>の部分が、クリックで原寸表示される部分に なります。
<a href="s1.png" onclick="setimg(this.href,'コメント1'); return false;"><img src="s1_t.png" alt="s1" title="クリックで原寸大" style="border:none;"></a>
<a href="s2.png" onclick="setimg(this.href,'コメント2'); return false;"><img src="s2_t.png" alt="s1" title="クリックで原寸大" style="border:none;"></a>
<a href="s3.png" onclick="setimg(this.href,'コメント3'); return false;"><img src="s3_t.png" alt="s1" title="クリックで原寸大" style="border:none;"></a>
<a href="s4.png" onclick="setimg(this.href,'コメント4'); return false;"><img src="s4_t.png" alt="s1" title="クリックで原寸大" style="border:none;"></a>
<br>
<div id="view"></div>
※ a要素内の画像に付く枠を消す style="border:none;" は、スタイルシートに img { border:none; } のようにCSS規則を入れておけば不要となります。
※ 画像ファイル名は相対パスで記入してください。
※ サンプルでは画像は4枚ですが、いくらでも追加する事が出来ます。
※ スクリプト内でIDを指定していますので、1つのページに複数設置する事は 出来ません。



サムネイルを使わない場合
原寸の画像をa要素のhref属性とimg要素のsrc属性で指定し、img要素のタグでは width属性(幅)を80ピクセル、height属性(高さ)を60ピクセルと設定して 縮小表示しています。その他は同じです。
<a href="s1.png" onclick="setimg(this.href,'コメント1'); return false;"><img src="s1.png" alt="s1" title="クリックで原寸大" width="80" height="60" style="border:none;"></a>
<a href="s2.png" onclick="setimg(this.href,'コメント2'); return false;"><img src="s2.png" alt="s1" title="クリックで原寸大" width="80" height="60" style="border:none;"></a>
<a href="s3.png" onclick="setimg(this.href,'コメント3'); return false;"><img src="s3.png" alt="s1" title="クリックで原寸大" width="80" height="60" style="border:none;"></a>
<a href="s4.png" onclick="setimg(this.href,'コメント4'); return false;"><img src="s4.png" alt="s1" title="クリックで原寸大" width="80" height="60" style="border:none;"></a>
<br>
<div id="view"></div>