• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：マウスカーソルに合わせて画像が移動するjavascriptで困っていま）

マウスカーソルに合わせて画像が移動するjavascriptで困っていま

このQ&Aのポイント
  • マウスカーソルに合わせて画像が移動するソースコードを書いたのですが、マウスカーソルの動きについていけず、画像がワープ（？）してしまいます。
  • 解決策が分かる方がいらっしゃいましたら、ご指摘願います。
  • マウスカーソルに合わせて画像が移動するjavascriptで困っています。

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

単純にimgの上にマウスが移動するとイベントが発生しなくなるからでは？ 参考例としてこんな感じでは？ （IE7、8では取得の方法が変わっているかも…） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> div.box { width:500px; height:500px; background-color: #ddd; } #img0 { position:absolute; } </style> </head> <body> <div class="box" onmousemove="move(event)"> <img src="A.jpg" id="img0"> </div> <script type="text/javascript"> <!-- var styl = document.getElementById("img0").style; function move(evt) { var x, y; /*@cc_on @if(@_jscript) x = evt.x + document.body.scrollLeft; y = evt.y + document.body.scrollTop @else*/ x = evt.pageX, y = evt.pageY; /*@end @*/ styl.left = x + 'px'; styl.top = y + 'px'; } //--> </script> </body> </html>

fretum765
質問者

お礼

回答ありがとうございます。 firefoxで起動を確認したところ、スムーズに画像が移動しました。 IE8で起動を確認したところ、画像がスムーズに移動しませんでした。 onmousemove（）とIE8の相性が悪いのかもしれません。 詳細な回答ありがとうございました。

すると、全ての回答が全文表示されます。

その他の回答 (2)

回答No.3

こういうのは、いかがですか？ http://www.tagindex.com/stylesheet/properties/cursor.html の、url()

fretum765
質問者

お礼

早速の回答ありがとうございます。 .curファイルを作成するのが少し時間がかかりそうですが、 アイデアとして面白いですね。

すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

No1です。 書き忘れましたが、No1のままだとimgマウスがimgの上にあればイベントが 発生するので、divの外側に出ても画像は移動できてしまいます。 x、yの範囲を見ながら、移動するかしないのかの判断が必要です。

fretum765
質問者

お礼

丁寧なコメントありがとうございます。 divの外側に出てしまっても画像が移動するとのこと了解しました。

すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

注目のQ&A

カテゴリ

OKWAVE コラム

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する