adiary開発日誌

サンプルと概要

ASIN記法のサンプル

上のリンクのマウスを乗せるとわかりますが、画像がポップアップで表示されます*1。

このようなポップアップを実現するには、Firefox (Netscape)において、onMouseMoveを使うことが一般的のようです。しかし、マウス座標を取得するためだけに、マウス移動のイベントを拾うというのは非効率的すぎてどうにも釈然としません。

IE/Firefoxで使えるポップアップウィンドウ

以下のスクリプトは自由に使って構いません。（2008/09/17 Update）

function popup_img( img_url, evt ) {
	var text  = "<img src=\"" + img_url + "\">";
	var div   = document.getElementById( 'popup' );
	var style = div.style;
	var cx; var cy;
	if (! evt) { evt = event; }
	cx = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
	cy = evt.clientY + (document.body.scrollTop  || document.documentElement.scrollTop);
	style.left = (cx + 16) + 'px';
	style.top  = (cy + 12) + 'px';
	div.innerHTML = text;
	style.zIndex   = 9999;
	style.display  = 'block';
}

function popdown() {
	document.getElementById( 'popup' ).style.display = 'none';
}

となります。ポップアップを実現したい場所では、

<tag onMouseOver="popup_img('<画像URL>', arguments[0])" onMouseOut="popdown()"></tag>

とします。

仕組み

見ればわかりますが、呼び出し側でarguments[0]と書かれた場所があります。これがミソです。onMouseMoveを使う実装方法では、マウスを動かすたびにいちいちイベントを取得していましたが、この方法ではonMouseOver発生時のイベント（イベントオブジェクト）をarguments[0]によって取得しています。