WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:Javascriptによるマウスカーソル追跡とフレーム

0:[投稿] kaz [MAIL] [2003/01/20 11:08 ][環境:わからない わからない]

下のような感じでスクリプトを追加して
画像のマウスカーソル追跡をやってみたんですが、
フレームで割ってあるページでは、
そのフレームの中でしか追跡してくれません。
フレームを越えた追跡は可能なのでしょうか?
もし無理ならフレームに対応したカーソル追跡の方法を
教えて頂けませんか?

前略
<script language="JavaScript">
function move(){
 pic1.style.pixelLeft=event.x + 8;
 pic1.style.pixelTop=event.y;
}
</script>
中略
<body onmousemove="move()">
<img src="images/head.gif" id="pic1" style="position:absolute;top:100;left:200">
後略


1:[質問] kaz [MAIL] [2003/01/23 20:16 ]

java scriptでなくてもOKです。
とにかくフレームに関係なく作動できる
マウスカーソルを画像に変更する方法を教えて頂けませんか?


2:[回答] K-Pan [2003/01/23 21:06 ]

フレームを超えて動作させることは(恐らく)不可能です。

全てのフレームで同じスクリプトを動作させれば同じ事になりませんか?


3:[回答] kaz [MAIL] [2003/01/24 10:55 ]

解答ありがとうございます。
その方法を使ってみたのですが、
フレーム間を移動したときに、
フォーカスされていないフレームに
マウスカーソルが残ってしまいました。
フォーカスされていなかったら画像を表示しない
スクリプトの例を教えて頂けませんか?

何度も質問すいません。


4:[回答] Malic [2003/01/24 15:24 ]

画像消す命令は分からないけど。マウスが範囲外に出たら動作するイベント
<body onmouseout="カーソル消す命令">

イベントの発生自体は、IE6.0でテストしました。
NN7.0だと、多少反応が遅かったけど、自分のPCスペックのせいかもしれません・・・。


5:[質問] kaz [MAIL] [2003/01/24 16:06 ]

カーソルを消す命令は適当に
function erase(){
 pic1.style.pixelTop=event.y - 2000;
 }
といった感じでやってみたらうまく作動しました。
ありがとうございます!

しかし、
スクロールバーを動かしたときに、
カーソルがスクロールさせる前の位置に
残ったままになってしまいます。
これはどうやったら回避できるのでしょうか?
度々の質問ですいませんが、お知恵をお貸し下さい。


6:[回答] Malic [2003/01/24 17:05 ]

イベントの onscroll かな。


7:[質問] kaz [MAIL] [2003/01/25 10:22 ]

すいません、
onscrollを使った位置補正がうまくいきません。
単純に
onscroll="move()"
では駄目なんでしょうか?


8:[回答] Malic [2003/01/27 13:37 ]

カーソルの移動量の計算までは分かりません・・
move();では駄目でしょう。

スクロールバーの移動量を取得して、
pic1.style.pixelTopに値を代入するのでしょうけど・・・

また、縦スクロールバーにカーソルを移動させると、NN7.0だと、onmouseoutイベントが発生し、IE6.0だとonmouseoverイベントは発生しないということも2大ブラウザで動作させたいなら考慮する必要があります。


9:[回答] Malic [2003/01/27 14:09 ]

先ほど(8)の回答以降テストして分かった事。

IE6.0でテストしてみました。
1.onscroll イベントでは、event.x とevent.y に、常に値が0である。
2.gif等の画像表示よりスクロールバーの方が優先的に表示される。(つまり、スクロールバー上に移動する追跡のgifは表示できない)

また、erace()関数の内容は、
pic1.style.pixelTop=event.y - 2000;
   ↓
pic1.style.pixelTop= -2000; //負なら、gifの高さ以上の値なら何でも良いが

の方がよいかも。


10:[回答] Malic [2003/01/27 14:16 ]

>また、縦スクロールバーにカーソルを移動させると、NN7.0だと、onmouseoutイベントが発生し、IE6.0だとonmouseoutイベントは発生しないということも2大ブラウザで動作させたいなら考慮する必要があります。


nn7.0では、追跡自体が動きません・・。ここの文撤回します。


11:[回答] kaz [MAIL] [2003/01/27 17:42 ]

解答及びテストありがとうございます!
スクロール移動量の検出は難しそうです・・・。
なにかいい方法がありましたら教えて下さい。
とりあえず調べてみます。


12:[回答] ween [2003/01/27 19:41 ]

>スクロール移動量
document.body.scrollTop, document.body.scrollLeft 等で
IE6/N7(Moz0.9.6以降)ともに取得できると思います。


13:[完了] kaz [2003/01/28 01:14 ]

function move(){
 pic1.style.pixelLeft=event.x + 8 + document.body.scrollLeft;
 pic1.style.pixelTop= event.y + document.body.scrollTop;
}

これでうまくいきました! 感動〜!
教えて下さった皆さんありがとうございました!

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World