マウスの追従とスクロール

質問

マウス追従で少々困っているのでお力を貸していただきたいと思っております。

サンプルコードなどを参考にしながら、マウスを追従し、スクロールをしても後についてくるものを作り、しっかりと動作はしました。
しかし、常に表示させるのが邪魔なので、特定の画像の上だけなどに説明文として出そうとし、

function menu_dsp(divnam,flg0){
document.getElementById(divnam).style.visibility = flg0;
}

というスクリプトと該当部分と外部CSSに以下のスクリプトを書き加えました。

<span onMouseOver="menu_dsp('helpNavi','visible');" onMouseOut="menu_dsp('helpNavi','hidden');">

div#mapNavi {
width: auto;
height: auto;
margin: 0px 15px;
padding: 0px 5px;
position: absolute;
z-index : 1;
visibility: hidden;
background-color: #ffffff;
border: 2px solid #ff99cc;

}

これらを追記するとページをスクロールさせた時に追従させたいものが置いていかれてしまいます。
単品ではしっかりと動作するので、隠す部分に何かまずい部分があるのかなと思うのですが、足りないものがあれば随時補足していきますので、解決法やアドバイスなどがありましたらよろしくお願いします。

回答No.3

nipox

なるほど、これでよく分かりました。

なぜ、追従すると置いていかれるのか・・・
これは、ページをスクロールするのが原因ではないでしょうか。
スクロールする前は、ちゃんと追従できていませんか?
もしそうならば、マウスストーカーのサンプルページから、もう一度全てのソースを拾ってこないといけません。

・・・それと、マウスストーカーにする必要は全くないと思うのです。

画像の横に、あらかじめポップアップヘルプを、
<div>かなにかで、配置させておいて、
それを表示させるという形にしたほうがよいかと思いますが・・・
なにか、マウスストーカー方式でないとまずい面があったら教えてください。

お礼

確かに無理にマウスストーカーにする必要は全くありませんでしたね＾＾；

マウスストーカーに特にこだわっていた訳ではなく、マウスストーカーで表示させた方が見た目が綺麗かな？と思い、なんとかしてできないだろうかとこだわってしまっていました為に、他の方法を利用しようという考えまで回っておりませんでした・・・。
nipoxさんのおっしゃられている方法を参考にし、再構成したいと思います。アドバイスありがとうございます。

また、私の疑問にお付き合いいただき、ありがとうございました。

回答No.2

nipox

もう後1点だけ補足していただきたいのですが、

<span>の中に画像ということで、
その画像に乗ったときだけ、
画像と文字を表示する??

という風にとらえる事が出来ますが、
画像の上にマウスを乗せる・・・
でも、その画像は表示されていませんよね??

ちょっとこの辺があいまいなので・・・
<span>の辺のソースか何かを載せていただけると分かるかもしれません。

補足

補足遅くなって申し訳ございません。

もともと表示されている画像データの上にポインタが来た時にマウスストーカーするポップアップヘルプを出したいという事なのですが、この表現でわかりますでしょうか？
(うまいいい表し方が出来ずすいません・・・。)

<span>の辺のソースに関しては以下の通りになっています。

<span onMouseOver="menu_dsp('helpNavi','visible');" onMouseOut="menu_dsp('helpNavi','hidden');"><img src="img/sample.jpg" boder="0" /></span>

該当部分を動かしているJavascirptに関しては以下の通りになっております。

function menu_dsp(divname,flg0){
document.getElementById(divname).style.visibility = flg0;
}

回答No.1

nipox

もう少し詳しく書いていただけると答えやすいのですが・・・

追従といっても、
そのスクリプトがありません。
マウスストーカーのことですか？

隠すとか、
spanなのに、なぜCSSはdivなのか、
隠す理由は、
なぜonmouseoverなのか、

等々・・・

何をしたいのか順序を追って、具体的にしてくださると答えやすいです。

補足

すいません、やはり説明不足でした・・・・

マウスストーカーに関しては以下のサイトを参考にさせてもらっています
http://www.red.oit-net.jp/tatsuya/java/cursor.htm

上記のマウスストーカーを使い、サイト内特定の画像の上のみでヘルプとして出したいと思っております。
しかし、普段からマウスストーカーで文字が出ているとサイトを見る時に邪魔かなと感じたので、マウスオーバーで画像の上に乗った時に出そうとimgタグをspanで括り、spanの中に書いてある画像上に乗っている間だけ表示させようとし、マウスオーバーを使っております。

CSSについてですが、若干IDの指定が間違っていますが、このDIVは上記のマウスストーカーのサイトを参考にした時にかかれていたDIVを自分で改良したものです。