重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

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

解決済

  • 質問者：fretum765
  • 質問日時：
  • 回答数：3件

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE></TITLE>
<SCRIPT>

<!--

function move(event){

img.style.left=event.x;
img.style.top=event.y;
}
//-->
</SCRIPT>
</HEAD>
<BODY>

<IMG src="hoge.png" name="img" style="position:absolute;" >
<div onmousemove="move(event);"
style="width:500px; height:500px; background-color:#cccccc;"></div>

</BODY>
</HTML>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.1ベストアンサー

  • 回答者： fujillin
  • 回答日時：

単純に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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2010/05/31 17:23

No.3

  • 回答者： babu_baboo
  • 回答日時：

こういうのは、いかがですか？


http://www.tagindex.com/stylesheet/properties/cu …
の、url()
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2010/05/31 22:54

No.2

  • 回答者： fujillin
  • 回答日時：

No1です。



書き忘れましたが、No1のままだとimgマウスがimgの上にあればイベントが
発生するので、divの外側に出ても画像は移動できてしまいます。

x、yの範囲を見ながら、移動するかしないのかの判断が必要です。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2010/05/31 17:30

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報