java script

解決済

質問者：ponta2008
質問日時：2010/05/06 15:54
回答数：3件

java script
マウスに追従する　画像について。

実装はできるのですが、こういった事象で困っています。
「縦スクロールに対して追いついてこない」
「1スクロール分したに移動するたびにおいてきぼりになる。」

このサイトも同じ事になってしまってます。
http://ameblo.jp/ma-reete/entry-10445768523.html

という事です。
以下、スクリプトでは間違っているのでしょうか。
回答お願いします。

（当方IE8試用、ＦＦではみれないようですね。）

<script language="JavaScript"></script>

<link href="style.css" rel="stylesheet" type="text/css" /></head>

<body onMousemove="moveImage()">

<IMG src="image/common/mika002.gif" id="myIMG">

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： fujillin
回答日時：2010/05/07 13:01

#2です。

手元のIE6では動作するようです。
IE8がないので確認できませんが、仕様変更されている可能性がありそう。
event.xは変わっていないと思いますので、document.allかdocument.bodyか…

まぁ、
document.all["ID"] は document.getElementById("ID")
などにしておいたほうが無難かと。

http://yakinikunotare.boo.jp/orebase/index.php?J …
（↑）によればIE7では、document.bodyがdocument.documentElementになっているみたい。
一方で、IE7はdocument.bodyでもいけてるみたい。（↓）
http://archiva.jp/web/javascript/get_mouse-posit …
IE8はわからないけれど、このあたりがあやしいのでは？

ところで、どのような環境での利用をお考えか不明ですが、IE限定でよいのでしょうか？
個人ユースのスクリプトなのか、HPならIE限定のページとかなのかな？

この回答への補足

きっと、ＦＦ、ＩＥをフォローできればＯＫだと思います。
元請からの要請なので。しかし、下にもありましたように元々ＩＥでフォローをいう事だったのでＦＦは無理と私は判断しております。

補足日時：2010/05/07 23:11

通報する

- 0
- 件

通報する

No.2

回答者： fujillin
回答日時：2010/05/06 17:43

検索すると同じスクリプトがあちこちに見られるので、よほど使いまわされているのだとは思うけれど、少々古い感じは否めません。

どれが元なのかわからないけれど、基本的に気になる点が2箇所。
1）画面のスクロール分を考慮していないので、追随しきれない。
2）元はIE専用のスクリプトとして作成されていたはず。
　（なので対応していないブラウザがある。例えばFireFox）

1）に対してはこんな感じでいけるはずですが、ブラウザ限定は変わらない。
　　（document.allとかevent.xとか）
http://javascript.eweb-design.com/0903_mi.html
http://www.webstudio.jp/web_studio/tech/files/m0 …

2）も考慮するなら、こんな感じ
http://www.shuraba.com/?p=computing/js/scroll

実装例（スクロール部分しか実装してないけれど。しかもtopのみ）
http://jsajax.com/Articles/alwaysmenu/307

この回答への補足

１）http://javascript.eweb-design.com/0903_mi.html

を参考に　実装してみましたが、
やはり　置いてきぼりになってしまいます..なにかエラーが起こっているのでしょうか？

以下現在の状況。　参照

<title></title>
<SCRIPT language="JavaScript">
function mouseImage() {
document.all["ID"].style.left= event.x + 8 + document.body.scrollLeft;
document.all["ID"].style.top = event.y + 16 + document.body.scrollTop;
}
document.onmousemove = mouseImage;
</SCRIPT>
<link href="style.css" rel="stylesheet" type="text/css" /></head>
<body>

<div id="ID" style="position:absolute;"><IMG src="image/common/002.gif" id="myIMG"></div>