画像を角にポップアップ

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

実例

例文

<a href="javascript:;" onMouseOver="popupCorner('maguro.gif')" onMouseOut="popupCorner('')">マグロ</a> //*1
<a href="javascript:;" onMouseOver="popupCorner('ebi.gif')" onMouseOut="popupCorner('')">エビ</a>
<a href="javascript:;" onMouseOver="popupCorner('ika.gif')" onMouseOut="popupCorner('')">イカ</a>

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

//画像を表示
function popupCorner(img_file) {
	var obj = document.getElementById("div_area");
	
	obj.style.position = "fixed"; //*2

	if (img_file == "") {
		obj.innerHTML = ""; //*3
	} else {
		//表示位置（右上）
		obj.style.right = "0px"; //*5
		obj.style.top = "0px";
		obj.style.left = "auto";
		obj.style.bottom = "auto";		
		//画像を出力
		obj.innerHTML = "<img src='" + img_file + "'>"; //*4
	}
}
</script>

解説

リンクの画像名にマウスを載せると画像を画面の右上に表示します。
スクロールしても画像の位置は変わりません。

（*1）<div>タグを空の状態で出力します。

（*2）<div>タグをスクロールから独立させて固定できる状態にします。

（*3）変数img_fileが空の場合、<div>タグの中を削除します。

（*4）<div>タグの中に<img>タグを入れます。その他、テキストやHTMLのタグを入れることができます。

（*5）<div>タグを指定の位置に設定します。左に寄せるなら「left」、下に寄せるなら「bottom」に「0」を指定します。「auto」の値は、他の設定に対応して変化します。

応用 - リンクを取得

もし、リンク先とポップアップする画像が同じ場合、リンク先に画像のファイル名を指定し、それを「this.href」で取得することができます。

マグロエビイカ

<a href="maguro.gif" onMouseOver="popupCorner(this.href)" onMouseOut="popupCorner('')">マグロ</a>
<a href="ebi.gif" onMouseOver="popupCorner(this.href)" onMouseOut="popupCorner('')">エビ</a>
<a href="ika.gif" onMouseOver="popupCorner(this.href)" onMouseOut="popupCorner('')">イカ</a>

onMouseOverの中を全部同じにすることができるので、ファイル名を変更する場合の作業は非常に簡単です。

応用 - 画像の配置を移動

画像を出力した後、移動する場合、固定を解除する設定が必要です。

テスト用移動ボタンを押すと画像が表示されます。

//表示枠を移動
function changeCorner(num) {
	var obj = document.getElementById("div_area");
	
	//画像を出力
	obj.style.position = "fixed";
	obj.innerHTML = "<img src='maguro.gif'>";
	
	//移動
	if (num == 0) {
		//左上
		obj.style.left = "0px";
		obj.style.right = "auto";
		obj.style.top = "0px";
		obj.style.bottom = "auto";
	} else if (num == 1) {
		//右上
		obj.style.left = "auto";
		obj.style.right = "0px";
		obj.style.top = "0px";
		obj.style.bottom = "auto";
	} else if (num == 2) {
		//左下
		obj.style.left = "0px";
		obj.style.right = "auto";
		obj.style.top = "auto";
		obj.style.bottom = "0px";
	} else {
		//右下
		obj.style.left = "auto";
		obj.style.right = "0px";
		obj.style.top = "auto";
		obj.style.bottom = "0px";
	}
}

ユーザー関数changeCornerに対して、0～3の値を引数として渡すことで移動先が切り替わっています。

画像が出力済みの場合は、「画像を出力」の部分は必要ありません。

タグで画像を先に出力する場合、以下のように<div>タグと<img>タグをHTML内に用意しておきます。

<div id="div_area" style="posiotion:fixed;left:0px;top:0px"><img src="maguro.gif"></div>

戻る