イヌでもわかるJavaScript講座
|
イヌでもわかるJavaScript講座
|
|
Step.66 - サムネイルの拡大図をポップアップウィンドウに表示
|
サムネイル画像をクリックすると、ポップアップウィンドウを作ってそこで拡大図を表示します。 |
| Step テーマ ● window.open したウィンドウに HTMLを書き込む (document.write) |
実行例画像をクリックすると拡大図を表示するよ！ 
|
リスト<script type="text/javascript"><!-- myJpeg = new Array( // 画像のURL, タイトル, 画像の幅, 画像の高さ "car1.jpg", "HONDA S2000", 320, 240, "car2.jpg", "TOYOTA SUPRA RZ", 320, 240 ); function myGo(myTblNo){ myAry = myTblNo * 4; // 配列の先頭 myXX=myJpeg[myAry+2]; // ウィンドウ横幅 myYY=myJpeg[myAry+3]; // ウィンドウ縦幅 myWinName = "Win" + myTblNo; // ウィンドウ名 myWinSize = "resizable=yes,width=" + myXX + ",height=" + myYY; // ウィンドウオプション myWin = window.open("" , myWinName , myWinSize); // ウィンドウを開く myWin.document.open(); myWin.document.write( "<html>" ); myWin.document.write( "<head>" ); myWin.document.write( "<title>", myJpeg[myAry+1] , "</title>" ); myWin.document.write( "</head>" ); myWin.document.write( "<body style='margin:0px;padding:0px'>" ); myWin.document.write( "<img src='" , myJpeg[myAry] , "'>" ); myWin.document.write( "</body>" ); myWin.document.write( "</html>" ); myWin.document.close(); } // --></script> 画像をクリックすると拡大図を表示するよ！<br> <a href="JavaScript:myGo(0)"><img src="car1s.jpg" border="0" width="100" height="75"></a> <a href="JavaScript:myGo(1)"><img src="car2s.jpg" border="0" width="100" height="75"></a> |
| サンプルだけの HTMLは こちらへ |
使い方● ポップアップウィンドウに表示する画像を myJpeg テーブルにセットします。 画像のURL, タイトル, 画像の幅(ピクセル), 画像の高さ(ピクセル), の順でセットしていきます。 myJpeg = new Array( // 画像のURL, タイトル, 画像の幅, 画像の高さ "car1.jpg", "HONDA S2000", 320, 240, "car2.jpg", "TOYOTA SUPRA RZ", 320, 240 ); ※ 一番最後だけ、カンマは いりませんよ。 ● サムネイル画像を設置します。 <a href="JavaScript:myGo(0)"><img src="car1s.jpg" border="0" width="100" height="75"></a> <a href="JavaScript:myGo(1)"><img src="car2s.jpg" border="0" width="100" height="75"></a> myGo() のパラメータに、該当する myJpeg テーブルの行番号を指定します。 ※行番号はゼロから数えます。 myGo( 行番号 ); 以上です。 |
説明サムネイル画像をクリックすると ポップアップウィンドウに拡大画像を表示します。 同じ画像のポップアップを重複して開かないように、画像単位にウィンドウ名を付けました。 myWinName = "Win" + myTblNo; // ウィンドウ名 ウィンドウには タイトルバーがせっかくあるのですから、タイトルを表示するようにしました。 window.open の戻り値で、そのウィンドウを制御することができます。 今回は、空白のウィンドウを開いて、document.write にて HTML をごっそり書き込みました。 myWin = window.open("" , myWinName , myWinSize); // ウィンドウを開く myWin.document.open(); myWin.document.write( "<html>" ); myWin.document.write( "<head>" ); myWin.document.write( "<title>", myJpeg[myAry+1] , "</title>" ); myWin.document.write( "</head>" ); myWin.document.write( "<body style='margin:0px;padding:0px'>" ); myWin.document.write( "<img src='" , myJpeg[myAry] , "'>" ); myWin.document.write( "</body>" ); myWin.document.write( "</html>" ); myWin.document.close();
※ 画像データの著作権は ＡＬＦＡさんが所有しています。 参考ステップ Step.13 リンク先を新しいウィンドウで表示してみましょう ※ window.open Step.32 ポップアップウィンドウを開いて BGMを流してみましょう その２ ※ open、close、closed | ||||||
 |