PR

自分で書いて,しくみを理解!

古いけれども今も使える『無料の』技術で,Webプログラミングの面白さを,再発見してみましょう! ぜひ,リストを追いながら,初心にかえって,入力してみてください。プログラミングの楽しさを実感できることでしょう。

カーソルと一緒に動く画像

 今回は,ブラウザのウィンドウ内の座標値を取得して,画像の動作を制御してみましょう。最初は,マウスカーソルの動きに合わせて画像を動かすことからです。

 例として,図1のようなうどんの画像を1枚使います。実行画面は図2のようになります。

図1●マウスポインタと一緒に動く画像

図2● カーソルの動きに合わせて,うどんの画像が一緒に動く(クリックすると別ウィンドウで表示します)

リスト1●「カーソルと一緒に動く画像」のソースコード(ソースをこちらからダウンロードできます)

~XHTML宣言略~
<script type="text/javascript">
<!--
 
//最初に実行される処理
function window_onload(){
  if(document.all){ //IE7用
      document.onmousemove = moveImageIE;
  }
  else{ //Firefox2用
    window.addEventListener("mousemove",moveImageFireFox,false);
  }
}
 
//IE7用のコード
function moveImageIE(){
  document.getElementById("myImage").style.left
    = window.event.clientX + document.body.scrollLeft + "px";
  document.getElementById("myImage").style.top
    = window.event.clientY + document.body.scrollTop + "px";
}
 
//Firefox2用のコード
function moveImageFireFox(evt){
  document.getElementById("myImage").style.left 
    = evt.clientX + window.pageXOffset + "px";
  document.getElementById("myImage").style .top
    = evt.clientY + window.pageYOffset + "px";
}
 
// -->
</script>
</head>
<body onload="window_onload()">
<h1>カーソルと一緒に動く画像</h1>
<div id="myImage" style="position:absolute">
  <img src="curry.gif" alt="カレーうどん" />
</div>
</body>
</html>

 XHTMLの<div>要素のidにmyImageと指定して,その中に<img>要素を配置し,src属性にcurry.gif(図1)を指定して読み込んでおきます。

<div id="myImage" style="position:absolute">
  <img src="curry.gif" alt="カレーうどん" />
</div>

 今回のサンプルは,第3回の「タイマー制御の基本」で解説した,alphaフィルタの処理と同じように,IE7とFirefox2の両方に対応させるために,それぞれ別のコードを書く必要があります。

if(document.all){
  document.onmousemove = moveImageIE;
}
else{
  window.addEventListener("mousemove",moveImageFireFox,false);
}

 ドキュメント要素である,document.allはIE4以上でしか認識されません。document.allが認識されるブラウザの場合は,onmousemoveイベントに,IE7で動作するmoveImageIEプロシジャを実行させます。

 それ以外,たとえばFirefox2の場合は,DOM2のaddEventListenerメソッドによりmoveImageFireFoxプロシジャを呼び出します。addEventListenerメソッドの書式は以下のようになります。

addEventListener(in DOMString type,
    in EventListener listener, in boolean useCapture) ;

 第1のパラメータには,イベント種別を文字列で渡します。イベントハンドラの on を取り除いた文字です。

 第2のパラメータには,処理する関数オブジェクトを指定します。関数の括弧 ( ) を取り除いて指定します。

 第3のパラメータ,useCaptureにはイベント経路(キャプチャ)の優先順位を,trueまたはfalseで指定します。trueを指定すると優先的にその要素に対してイベントが伝搬されます。今回のサンプルでは,イベントの優先順位は関係ありませんから,trueでもfalseでも,どちらを指定してもかまいません。

 IE7の場合は,moveImageIEプロシジャを実行します。

document.getElementById("myImage").style.left
  = window.event.clientX + document.body.scrollLeft + "px";
document.getElementById("myImage").style.top
  = window.event.clientY + document.body.scrollTop + "px";

 のように記述して,DOMのgetElementByIdメソッドを使い,id名がmyImageである<div>要素にアクセスします。そして,style属性のleftとtopに対して,ページ全体の絶対座標を指定します。style属性のleftに指定する座標値は, window.event.clientXで習得したイベントの発生したX座標値に,document.body.scrollLeftによって習得したスクロールした座標値を加算したものです。

 同様に, topに指定する座標値はwindow.event.ClientYで習得したY座標値にdocument.body.scrollTop の座標値を加算したものです。

 Firefox2.0の場合は,moveImageFireFox(evt)プロシージャを実行します。

document.getElementById("myImage").style.left
  = evt.clientX + window.pageXOffset + "px";
document.getElementById("myImage").style .top
  = evt.clientY + window.pageYOffset + "px";

 イベントの発生した座標を取得し,それにwindow.pageXOffsetとwindow.pageYOffsetを加算します。これで,IE7.0の時と同じくページ全体の絶対座標を取得できます。evtはmoveImageFireプロシジャの引数として与えられた変数で,evt.clientXとevt.clientYはIE7.0で動作する,window.event.clientXやwindow.event.clientYと同じもので,イベントの発生した座標を取得します。

 <body>要素のonloadイベントにwindow_onloadイベントハンドラを指定します。

<body onload="window_onload()">