Copyright(C) 2004 web工房 All Rights Reserved
画像(150W) / 画像(300W) / 画像(600W) / 画像(900W)
){kind=link}
){kind=link}
){kind=link}
){kind=link}
上記リンク文字をクリックすると新しいウィンドウに画像を表示します。
ウィンドウサイズは画像の大きさに設定した余白を加えた大きさになっています。
(画像はすべてサイズが違う/ひとつの画像のサイズのみ変更しているのではありません)
◆手順1【スクリプト】
※<head>〜</head>に記述します
※サンプルは新たにhtmlファイルを作っています([技k009]参照)
-----次の行から(copy)-----
<script type="text/javascript">
<!--
function winOpen(FILE) {
var WINWIDTH; //画像の幅
var WINHEIGHT; //画像の高さ
var subWin;
subWin=window.open("","SUB_WIN_k010",
"top=100,left=50,scrollbars=0,resizable=1,toolbar=0,menubar=0,location=0,directories=0,status=0");
//ウィンドウを開く
subWin.document.open(); //ドキュメントストリームを開く
subWin.document.write("<html><head>"); //以下にドキュメントを書き出す
subWin.document.write("<title>サンプル</title>");
subWin.document.write("<style type='text/css'> body { font-family: ＭＳ Ｐゴシック; font-size:11pt; background-color:#000000; color:#ffffff;} </style></head>");
subWin.document.write("<body onBlur='focus()'>");
subWin.document.write("<div style='top:20px; left:20px; position:absolute;'>
" +"<a href='JavaScript:window.close()' title='Windowを閉じる'>Windowを閉じる</a><br><br>");
subWin.document.write("<img src='" + FILE + "' name='PIC'
border='1'></div>");
subWin.document.write("</body></html>");
subWin.document.close(); //ドキュメントストリームを閉じる
WINWIDTH=subWin.document.PIC.width+50; //ウィンドウの幅(画像幅+余白
WINHEIGHT=subWin.document.PIC.height+100; //ウィンドウの高さ(画像高さ幅+余白
subWin.resizeTo(WINWIDTH,WINHEIGHT); //ウィンドウのサイズ変更
}
//-->
</script>
-----上の行まで(copy)-----
◆手順2【リンク文字からの実行】
※<body〜</body>に記述します
※オープンする画像の相対パスを指定してスクリプトを実行します
-----次の行から(copy)-----
<a href="javascript:winOpen('photo/w600.JPG')">画像(600W)</a>
-----上の行まで(copy)-----
◆ウィンドウをオープンして画像を読込、その画像の大きさに合わせてウィンドウのサイズを変更します。
【類似技】
◆[技k002]大きさや形式を指定してウィンドウをオープンする
◆[技k005]ウィンドウをオープンしたとき大きさを変える
【応用技】
◆[技a022]サムネイル画像をクリックすると専用ビューアーで拡大画像を開く
に応用しています
■注意■
※この技は、オープンするタイミング等で大きさがうまく得られず、画像よりかなり小さくオープンすることがあります。特に初めてオープンするときにそのような現象がみられます。原因は不明です。どなたか解決方法ご存じの方、ご教授下さい。
◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。インラインフレームの幅もウィンドウ幅に追従します。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----