..



 ■HomeJavaScriptサンプル集〔インタラクティブ編〕−画像制御(サムネイル)

JavaScript 無料のフリースクリプト集...
サムネイル
サムネイル

 サムネイル表示の画像にマウスカーソルをあわせると中央に大きく画像を表示します。
 ※通信速度が遅いと画像の読み込みまでに時間がかかる場合があります。



 HPでの使用方法
1.プログラムのダウンロード

 適当なフォルダかサムネイルを表示するHTMLのあるフォルダに下記のプログラムと実行HTMLをダウンロードして下さい。サーバーに アップする時もこれらがばらけないように同じフォルダに入れて下さい。次のリンクを右クリックして「対象をファイルに保存」を選ぶとダウンロードできま す


 プログラムファイル
 thumb.js
 実行HTMLファイル
 thumbexec.html




このように小さい画像を用意してページに貼り付けることもできます→
..


2.<body>〜</body>タグ間の編集

 HTMLのサムネイルを表示したい部分に次の赤字を挿入してください。この作業はコピー&ペーストでもOKで す。表示するHTMLと別のフォルダに画像やプログラムファイルを置く場合はsrcのファイル名にパスを通してください。画像のファイルが大きかったり小 さい時は<iframe>のwidth(幅)とheight(高さ)の値を調整してください。

<body>・・・
<iframe src="thumbexec.html" width="360" height="350" frameborder="1" scrolling="no" allowtransparency="true">
</iframe>

・・・</body>


3.画像ファイルの設定

 プログラムファイルの一行目の配列に画像のファイル名を記入してください。画像の個数はいくつでもかまいません。


4.サムネイル枠内の背景

 サムネイル枠内の背景の画像や色は、実行HTMLファイル「thumbexec.html」の<body>タグに設定します。



プログラムリスト(thumb.js)
imFile=["image0.jpg","image1.jpg","image2.jpg","image3.jpg","image4.jpg","image5.jpg"];
imMax=imFile.length;
document.write("<div align='center'>");
document.write("<img src="+imFile[0]+" name='pic'><br><br>");
for(var i=0;i<imMax;i++)
{
   document.write("<img src="+imFile[i]+" width=48 height=48 border='1' onmousemove='picDraw(this)' name='pix"+i+"'>");
}
document.write("</div>");
document.write("<div align='right'><br>");
document.write("<span style='font-size:9px;background-color:rgb(200,200,200);'><a href='http://plusone.jpn.org/javascript/' target='_blank'>+1JavaScript</a></span>");
document.write("</div>");
size=document.pic.width/imMax;// ネスケ対策のためここでサイズを取得
for(var i=0;i<imMax;i++)
{
   document.images["pix"+i].width=size;
   document.images["pix"+i].height=size;
}
function picDraw(obj)
{
   document.pic.src=obj.src;
}

※上記のサンプルプログラムをコピー&ペーストで実行する場合は以下の画像ファイルを右クリックして「対象を保存」で同じフォルダ内に保存してください。


image0.jpg  image1.jpg   image2.jpg  image3.jpg   image4.jpg  image5.jpg

一括ダウンロードファイル: image.lzh
..


..


..