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

赤字: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として出力可能です。

戻る