クリックしたら画像がやってくる

質問

<div id="gotolist" style="position:absolute;top:150;left:10">
<img src="kabe2.gif">
</div>
<script language="javascript">
<!--
document.onclick=ko;
function ko()
{
gotolist.style.posTop=event.y;
gotolist.style.posLeft=event.x;
alert(event.x+";"+event.y);
}
//-->
</script>
と言うプログラムを作ったのですが、ページ上で<img src="kabe2.gif">が画面から見えなくなったときクリックをするとその場所にやってこずにalertでクリックした位置だけ正常に出ます
<img src="kabe2.gif">が見えるところまで戻るとevent.x位だけが正常でevent.y位はうまくいかないのですが何故でしょうか？

何故だかわからずに困っています。
よろしくお願いします。

回答No.1

noname#199778 · ベストアンサー

event.yはウィンドウ上のポインタの位置の座標を取得するものですので、ポインタ位置に合わせて表示内容を移動させたい場合は、ページをスクロールダウンしている時のために、そのスクロールした分だけ移動先の座標位置を補正する必要があると思います。
document.body.scrollTopというプロパティで現在表示されているウィンドウの上端の、ページ全体におけるY座標が取得できるはずですので、これを補正値として加えてみてはいかがでしょうか。

具体的には、以下のような改造を施してみてはいかがでしょうか。

function ko()
{
xx=document.body.scrollLeft+event.x;
yy=document.body.scrollTop+event.y;
gotolist.style.posTop=yy;
gotolist.style.posLeft=xx;
alert(event.x+";"+event.y);
}

こうすると、ページをスクロールしてもクリックした位置に対象の要素が移動してくると思います。

見当違いでしたらごめんなさい。

お礼

スクロール！！
まったく考えてもいませんでした。汗
document.body.scrollTopですか～♪
願っていた通りの動きが出来ました。
ありがとうございます。

こんなに早くできるようになるなんて感激です。
本当にありがとうございます。