JavaScript：指定サイズの新規ウィンドウで画像を開く　199902.14

JavaScript対応ブラウザの場合には画像にフィットするサイズの新規ウィンドウを開き、未対応ブラウザでは通常の新規ウィンドウを開きます。仕様上はMozilla3&IE3以上に対応していますが、IEは実試験ができないので堪忍して下さい。

JavaScriptは紫、変更可能箇所は赤で表示します。

まず、HTMLの<head>～</head>内に、以下のスクリプトを書きます。コピー&ペーストしてしまって構いません。

<script type="text/javascript">
<!--
wMargin=20; //画像とウィンドウサイズとのマージン
//指定サイズの新規ウィンドウで画像を開く関数 by Taishi
function openImgWin(imgURL,iWidth,iHeight){
/*
    imgURL=ファイルへのURL
    iWidth=画像横幅
    iHeight=画像高さ
*/
    imageWin = window.open(imgURL, "_blank",
        "width=" + (iWidth+wMargin) + ",height=" + (iHeight+wMargin)
        + ",resizable=no, directories=no, location=no, menubar=no, scrollbars=no, toolbar=no");
}

//a hrefを書く関数 by Taishi
/* HTML本体からはこちらを参照する。
    imgURL=ファイルへのURL
    iWidth=画像横幅
    iHeight=画像高さ
    iLinkName=リンクをはる文字列、画像など
*/
function openImgWinTag(imgURL,iWidth,iHeight,iLinkName){
    document.writeln("<a href='javascript:openImgWin(\"" + imgURL + "\", "
     + iWidth + ", " + iHeight + ")'>" + iLinkName + "<" + "/a>");
}
//-->
</script>

本文のHTMLソースをだーっと書いて、画像へのリンク部分に来たらこう書きます。コピー&ペーストした後、赤字部分を直しましょう。
script内の括弧符はシングルクォート( ' )、noscript内はダブルクォート( " )です。
```
<script type="text/javascript">

</script><noscript>
<a href="../img/germanimac.jpg" target="_blank">おたのしみ画像</a>
</noscript>
```
引数解説：

「../img/germanimac.jpg」画像URL

「310」画像横幅

「301」画像高さ

「おたのしみ画像」被リンク文字列

JavaScript対応ブラウザでは<script type="text/javascript">～</script>内が実行され、未対応ブラウザでは<noscript>～</noscript>内が実行されます。
このため、2箇所のURL「../img/germanimac.jpg」とリンク文字列「おたのしみ画像」には、完全に同一の文字列を書いて下さい。
実際のウィンドウは画像サイズよりも縦横に20ピクセル大きくなります。
リンク文字列の代わりに画像(img要素)を使うことも出来ます。
script内のimg全体を、シングルクォート( ' )で囲むのを忘れないように。
```
<script type="text/javascript">

</script><noscript>
<a href="../img/germanimac.jpg" target="_blank"><img src="../img/apple15.gif" width="15" height="15" alt="林檎"></a>
</noscript>
```
引数解説：

「../img/germanimac.jpg」画像URL

「310」画像横幅

「301」画像高さ

「<img src="../img/apple15.gif" width="15" height="15" alt="林檎">」被リンク画像URL
外部JavaScriptファイルを使いたい場合は、1番のスクリプトのうちでに囲まれた部分をテキストファイルに書き出し、適宜アップロードします(ファイル名例:"openimgwin.js")。
HTMLの<head>～</head>内には、スクリプトの代わりに、以下の1行を記述します。コピー&ペーストしてしまって構いません。

<script type="text/javascript" src="openimgwin.js"></script>
2番or3番の作業は変化なしです。必要箇所にスクリプトを書いて下さい。

実行するとこうなります。

季節外れの絵ですが、あまりにも可愛いので(*^_^*)。Appleドイツのトップページに一時期飾られていました。

華胥国領事館 / 華胥国博物院 / 書跡展示室

JavaScript：指定サイズの新規ウィンドウで画像を開く 199902.14

JavaScript：指定サイズの新規ウィンドウで画像を開く　199902.14