ポップアップ(リンク連動)

 下のリンクまたはボタンをクリックするとウインドウが開き、画像が表示されます。
 ウインドウはHTMLファイルを呼び出していますが、JavaScriptを使ってサイズを指定しています。また、リンクから画像ファイル名を先のHTMLファイルに送信し、受信側のJavaScriptで画像を表示させています。受信側のHTMLファイルは1つだけで全て処理しています。
 通常、HTMLファイルを指定して開く場合、画像毎にHTMLファイルを用意する必要があります。また、画像を直接指定して開く場合、画像の周囲に余白ができてしまいますし、画像を閉じるときにJavaScriptを使うことができません。
 このスクリプトを使えば、たった1つのHTMLファイルで全ての画像を開くことができ、開いた画像にスクリプトで細工をすることも可能です。 ただし、画像サイズは固定値になっています。


開く


 下記スクリプトでは、画像サイズを自動的に取得してウィンドウのサイズも変化します。
 IEではウィンドウを開く前に画像サイズを自動取得できますが、FireFoxでは取得できないため、ウィンドウを開いてからウィンドウサイズを調節しています。
 Mac版のIEでは、ウインドウがつぶれて見えなくなってしまいます。Mac版Safariでは、サイズの取得もウィンドウ調節も機能しません。
 Windows IE7では、最低ウィンドウ幅(250)より小さくなるため、開く1の横幅が反映されません。

 画像サイズの自動取得ができない場合、任意に指定することで正常に動作します。
 リンク部分にサイズの指定を入れます。→<a href="javascript:win_open2('IMG/sample500x300.gif',500,300)">
 functionも受け取る関数を用意します。 →function win_open2(wURL,wWidth,wHeight)
 画像サイズの取得部分は不要になりますので、消してください。

 ウィンドウはwindow.open時に名前を付けてますが、同じ名前で開くので同じウィンドウを再利用することになります。そのため、ウィンドウを閉じなくてもウィンドウが増えていくことはありません。


開く1 (160x120) 開く2 (320x240) 開く3 (500x300)

戻る