2006/01/07 Saturday
JavaScriptで開く別ウィンドウは、個人的には使い過ぎさえしなければ大変便利なものだと思っています。
画像のポップアップ表示もよく使われるものの一つでしょう。しかし直接画像ファイルを開くと、ブラウザのデフォルトのマージンだかパディングだかが適用されて余白が生じてしまいます。その分ウィンドウのサイズを大きめにすれば済むことですが、画像サイズぴったりのウィンドウを開きたい場合にはちと困りもの。
当サイト「Illustration」の画像は、個々に専用のhtmlファイルを用意しています。それならスタイルシートでマージン・パディングを無効にするだけの話。でも、らくがき程度のものにわざわざhtmlを用意するのはちょっと面倒です。
で、あちこち必死こいて調べながら辿り着いたのが以下の方法。DOMとやらでファイルを書き換える方法にも挑戦してみたのですが、うまく別ウィンドウに引数を渡すことが出来ずに断念。
function SubWin(url,x,y,na){
var windowFeatures = "width=" + x
+ ",height=" + y + ",top=0,left=0";
subwin=window.open("", "subwin", windowFeatures);
subwin.document.open();
subwin.document.writeln("<html><head>");
subwin.document.writeln("<title>"
+ na + "</title>");
subwin.document.writeln("</head><body
style='margin:0;padding:0;'>");
subwin.document.writeln("<img src='" + url
+ "' alt='" + na + "'>");
subwin.document.writeln("</body></html>");
subwin.document.close();
return false;
}
変な場所で改行している為見づらいですが、要は全部書き出してます。これを適当な名前を付けて保存。呼び出す側のhtmlの<head>内に、以下のタグを記述しておきます。
<script type="text/javascript" src="ファイルのURL">
</script>
実際に画像を呼び出す際の記述はこんな感じ。
<a href="URL" onclick="return
SubWin('URL','幅','高さ','名前')">サムネイル等</a>
JavaScriptがオフの場合でも同じ画面に画像が表示される･･･筈。あまりスマートでない気もしますが、とりあえず目的は果たせるのでよしとします。