JavaScriptでサムネイルを原寸表示
フレームを使わずに同一ページで画像のサムネイルを置いてクリックすると
原寸大表示する方法です。
写真やCG、イラスト等を展示したり、壁紙やホームページ用素材等の配布ページに
使えそうです。
左上の4枚の小さな画像をクリックしてください。下に原寸大で表示されます。
先ず、それぞれの画像のサムネイル(縮小画像)を作成してください。
サムネイルを使わずに画像を縮小表示する方法もありますが、これは原寸の画像を
見るつもりのないものまで読み込んでブラウザが小さく表示しているだけですので、
必然的にページの表示が遅くなります。
折角見に来て貰っても、ページが重いために表示されるまでにイライラして
閉じてしまい、結局見て貰えなかったという事にもなってしまいます。
ただ、元々画像の容量が小さく、数も少ない場合はサムネイルを使わなくても
良いでしょう。
サムネイルを使うか否かは見る側の立場で考えて判断してください。
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>
サムネイル画像は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要素の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>