トップ > Javascriptサンプル

Javascriptは、ブラウザの種類やバージョン、環境により機能するものとしないものがあります。
また、DHTMLを使用している場合もあります。
DHTMLについては「DHTMLサンプル」もご参照下さい。

■ マウスにくっつく画像(マウスストーカー)

マウスのイベントとしてマウスを移動した時のイベントを取得し、特定の処理を実行させます。

「Javascriptサンプル」−「マウスの座標取得」でマウスの座標を逐次取得することができました。
これを利用すればマウスにくっつく画像(マウスストーカーと言うらしいです。)が作成できます。

◆ 実行サンプル

このサンプルではここに記述するものはありません。
略号の説明 動作が確認できたブラウザ
IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53

【記述サンプル】

まず、テキストエディタなどを使用し、次の記述を「mpgrph1.js」というファイル名で保存します。
Wx = -1; Wy = -1; spannam1="span1"; divnam1="div1"; if (document.layers) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = m_pos; function m_pos(event0) { if (navigator.appName.charAt(0)=="M") { Et =event.type; Sx =event.screenX; Sy =event.screenY; Wx = document.body.scrollLeft+event.clientX; Wy = document.body.scrollTop+event.clientY; } if (navigator.appName.charAt(0)=="N") { Et =event0.type; Sx =event0.screenX; Sy =event0.screenY; Wx =event0.pageX; Wy =event0.pageY; } txt0=""; txt0+="マウスの座標"; txt0+=" : X = "+Wx; txt0+=" : Y = "+Wy; if (navigator.appName.charAt(0)=="M") { document.all[divnam1].style.pixelLeft = Wx; document.all[divnam1].style.pixelTop = Wy+15; } if (navigator.appName.charAt(0)=="N") { document.layers[divnam1].x = Wx; document.layers[divnam1].y = Wy+15; } }


次に、HEAD句内Javascriptの呼び出しを次のように記述します。
<script type="text/javascript" src="mpgrph1.js"></script>


そして、テキストを記述した次のようなレイアウト枠(レイヤー)を「body」タグの直後ぐらいに記述します。 <div id="div1" style="position:absolute;left:0;top:0;color:red; visibility: hidden;"> <img src="../../images/sample/star1.gif"> 星がマウスにくっつくよ!! </div>



page update:2010/01/23 20:32

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom