DynamicHTMLに関する情報を載せていきます。
新しく書いたものが上になるように並べてあります。
なお、文中に出てくる「オブジェクト」という言葉はW3Cでいうところの element（要素） を指しています。
正式用語ではないかもしれませんが、個人的に使いやすいのでこの単語を利用させてもらいます。
DIVタグやFONTタグ等、全てを総括したものだと思って下さい。
参考ページ
OpenSpace / DHtml station
IE等では、グローバル変数の event を用いてマウス座標を取得できます。
例えば、event.x がマウスのX座標を表します。
Firefoxではこの変数が定義されていません。W3C仕様に従っている為です。
W3Cでは、明示的にイベントリスナを追加することでマウス座標を取得します。
具体的には以下のようにします。
document.addEventListener('mousemove', funcMouseMove, false);
これで、documentオブジェクト（画面全体）の上でマウスカーソルが移動したときに
funcMouseMoveメソッドが呼び出されます。
このメソッドはユーザが宣言する必要があります。例えば、以下のようにします。
function funcMouseMove(event) {
mouseX = event.clientX;
mouseY = event.clientY;
}
引数に指定した event に、各情報が格納されています。
これはIEのものとは違うので注意して下さい。
マウスのX座標は event.clientX により取得します。
ほとんどのオブジェクトには offsetLeft, offsetTop というプロパティが用意されています。
これは、オブジェクトのX,Y座標を返すものですが
親オブジェクトを基準とした相対座標なので、絶対座標を求めるには多少のロジックを用意する必要があります。parentElement というプロパティが親オブジェクトを指しているので、これを利用して関数を作ってみました。
function getAbsoluteLeft(p_element) {
var pos = 0;
while (p_element) {
pos += p_element.offsetLeft;
p_element = p_element.parentElement;
}
return pos;
}
この関数は、パラメータに与えられたオブジェクトの絶対X座標を返します。
処理内容は簡単で、
オブジェクトの親オブジェクトを次々と検索していって相対座標を足し合わせて返すだけです。
絶対Y座標も同様にして求められます。