04 MouseMove の利用 - 絶対座標と相対座標
|
MouseMove は、マウスの現在位置を返すことが出来ます。 情報はマウスが１ポイントでも移動した時点でファンクションが呼び出されますので、事実上のリアルタイムと考えて差し支えありません。 リアルタイムで動作するということは、若干ブラウザとＣＰＵの性能に左右されることになりますが、現在普及しているPentiumII 300Mhz クラスのパソコンであれば、動作には支障はないようです。 さて、マウスから取り出される情報ですが、これはＩＥとＮＳによって全く異なってきます。 これまでのスクリプト分岐は、「 ＩＥ５、ＮＳ６ 」と「ＮＳ４」でしたが、このマウスの座標取得に関してはブラウザの癖が強いので、「 ＩＥ５ 」と「 ＮＳ６、ＮＳ４」の分岐となります。 また、座標情報の取得も、ブラウザによってかなり異なってきますので、ここで順を追って説明していくことにしましょう。
絶対座標と相対座標 マウスの座標取得では、その数値がどのような意味を成しているか、それを決めなくてはなりません。 絶対座標と相対座標の関係もそのひとつで、通常の使用に関してはまだそれほど問題視されない部分ですが、レイヤーを用いた作業の場合、この違いは決定的になります。  絶対座標と相対座標 絶対座標の場合、マウスの数値は必ず左上の画面位置を「ゼロ」とし、そこからの位置をマウスの現在位置として算出します。 一方相対位置は、現在のアクティブになっているウインドウからの位置を返してきます。 右図の場合、Ｗｅｂサイト上の１００＊１５０の位置にレイヤーが存在しているので、そのレイヤーのトップ位置を「ゼロ」とした値が、マウスの値となります。 絶対位置、相対位置ともに、使用する箇所によって用途を使い分けていくものですが、ことウインドウ上でのレイヤー操作となると、相対座標では決定的な欠点が発生します。 それは、現在位置がＷｅｂサイト上のマウスの位置なのか、レイヤー上の位置なのかを判定することができない事で、マウスの位置を規定することが不可能になってしまうわけです。 今回の講座では、マウスの位置は絶対座標で用いることにします。これは、この講座の最終目標が、レイヤーを用いたインタラクティブサイト構築にあるから二歩かなりません。
ＩＥにおける絶対座標の算出 ＩＥでは、一般的には「event.x」「event.y」というメソッドを用います。 このメソッドは非常に便利で、
ただし、この このため、ＩＥではこういった差異を解消するためのオブジェクトとして、
ＮＳにおける絶対座標の算出 一方、ＮＳでは、ＩＥのような面倒な値の算出は必要なく、単純にページのＸ座標とＹ座標を代入することで数値を取り出すことが出来ます。
ＮＳの場合は、スクロールバーを移動させるとそれに伴って値が自動で追加されるので、特に算出結果を足し合わせる必要などはありません。
マルチブラウザでの対応 さて、マルチブラウザでの対応の場合は、条件分岐を用いてファンクション化すると扱いやすくなります。
補足：相対座標の求め方 今回のスクリプトでは用いませんが、相対座標を算出するには、下記の方法を用いると良いでしょう。
相対座標の算出時は、表記形式の違いこそあれ、ブラウザ間での算出方法そのものには違いはありません。 ＩＥの場合はoffsetX、offsetYが、ＮＳの場合はlayerX、layerYが、相対座標算出に使うメソッドになります。 絶対座標と相対座標を組み合わせることによって、例えば、ページの縦横サイズを変更した際にフレキシブルに配置を変更するといった行動をページ上で行うことも可能になります。 | ||||||||||||
