画像を中央にポップアップ

赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名

実例

例文

<a href="javascript:;" onMouseOver="popupCenter('img/sushi2_maguro.gif')" onMouseOut="popupCenter('')">マグロ</a> //*1
<a href="javascript:;" onMouseOver="popupCenter('img/sushi2_ebi.gif')" onMouseOut="popupCenter('')">エビ</a>
<a href="javascript:;" onMouseOver="popupCenter('img/sushi2_ika.gif')" onMouseOut="popupCenter('')">イカ</a>

<script type="text/javascript">
//表示位置の作成
document.write("<div id='div_area'></div>"); //*2

//ポップアップ
function popupCenter(img_file) {
	var obj, img, img_w, img_h, img_x, img_y, timerID;

	obj = document.getElementById("div_area");
	
	obj.style.position = "absolute"; //*3
	    
	if (img_file == "") {
		obj.innerHTML = ""; //*4
	} else {
    	//画像を取得
		img = new Image();
		img.src = img_file;
		//画像のサイズ
		img_w = img.width; //*5
		img_h = img.height;
		
		//ブラウザの表示サイズを取得 //*6
		img_x = document.documentElement.clientWidth;
		img_y = document.documentElement.clientHeight;
		
		//表示位置を中央に調節（ブラウザ画面サイズの半分－画像サイズの半分）//*7
		img_x = (img_x / 2) - (img_w / 2);
		img_y = (img_y / 2) - (img_h / 2);

		//画面のスクロール量を加算
		img_x += document.documentElement.scrollLeft || document.body.scrollLeft;
		img_y += document.documentElement.scrollTop || document.body.scrollTop;
		
		//出力位置を決定
		obj.style.left = img_x + "px";
		obj.style.top = img_y + "px";
		
		//画像タグ出力
		if (img_w > 0) {
			obj.innerHTML = "<img src='" + img_file + "' width='" + img_w + "' height='" + img_h + "' border='2'>"; //*8
		} else {
			obj.innerHTML = "<img src='" + img_file + "' width='0' height='0' border='0'>"; //*9
			timerID = setTimeout("popupCenter('" + img_file + "')",100);
		}
	}
}
</script>

解説

マグロエビイカ（上記実例と同じです。スクロール後の状態を見るために使います。）

リンクにonMouseOverとonMouseOutを仕組んで、マウスが載ったときに画像を表示し、マウスが離れると画像が消えるようにします。

（*1）リンク内のスクリプトで、呼び出す画像を指定します。これによって、リンク毎に呼び出す画像を簡単に変更することができます。

（*2）画像を表示する枠として<div>タグを空の状態で書き出します。

（*3）<div>タグで作った枠を自由に動かせる状態に設定します。

（*4）変数img_fileが空の場合、空のテキストを出力することで画像を削除します。

（*5）画像を取得後、ここで画像の横幅を、次で高さを読み取ります。画像から自動的に取得することができるため、画像データに合わせた配置が可能になります。

（*6）ブラウザの表示幅と高さはIEとそれ以外のブラウザでは使えるプロパティを切り替えています。

（*7）中央に画像を配置するため、ブラウザの幅（高さ）の半分の位置（中央）から画像を半分ずらして画像の中心を合わせています。また、画面がスクロールしたときの移動量も足しています。

（*8）<img>タグをHTMLとして出力しています。ファイル名、横幅、高さの他、縁取りも設定しています。

（*9）画像サイズを取得できなかった場合、画像サイズを0にして出力します。そして、次のタイマーを利用して0.1秒後に再度同じユーザー関数を実行し、画像サイズが取得されるまで繰り返します。

画像がリンクと重なっていると、画像が表示された瞬間に画像が消えてしまいます。画像を出したままにしたい場合は、onMouseOutを削除します。

出力位置の指定に<img>タグを直接使わずに<div>タグを使っているので、画像以外のものもHTMLとして出力可能です。

戻る