オンマウスで説明文表示の表示位置の固定について

[新着] Webテンプレートを仮オープンしました

0   名前： hisa ： 2007/08/28（火） 13:33  ID:7lDb3pRE sub-t1
はじめまして、hisaと申します。
JavaScriptを使ってメニューボタン（画像）に
オンマウスで説明文の表示設定をしたいのですが、
表示位置がマウスを置く位置によって、説明文の
位置まで変わってしまいます。
説明文の表示位置を特定の場所に固定するには
どのようにすると良いのでしょうか？
是非教えて下さい。
1   名前： 匿名 ： 2007/08/28（火） 13:33  ID:RRwY88x6 sub-Ax
>> 表示位置がマウスを置く位置によって、説明文の位置まで変わってしまいます。

ソースが一緒に書かれていないので(<--ソースもかいときましょ)
予測で書きますが

onmouseoverだと思うんですが、
その関数は、マウスが画像上を動くたびに実行されますよ。
んで、きっと次のようなプログラムだと思いますが
// onmouseover時に実行される関数 = func()とする
function func()
{
    var x, y;
    // マウスの位置から表示する場所を計算
    x = 計算
    y = 計算
    // 説明文の場所を設定して、表示する
    *.style.left = x + 'px';
    *.style.top = y + 'px';
    *.style.visibility = 'visible';
}
マウスが画像上を動くたびfunc()が実行 --> マウスが動くたび説明文の場所も再計算、つまり、動く、ということです。

onmouseoverが実行されたときに
もしも説明文が表示されていなければ　→　表示する場所を計算して表示する。
既に表示されていたら　→　何もしない

というような感じでプログラムすればいいんじゃないかと思います。
2   名前： hisa ： 2007/08/28（火） 13:33  ID:7lDb3pRE sub-t1
匿名様、素早く大変ご親切な
アドバイスを有難うございます。
とても嬉しいです！
しかし私が使用しているソースとは
少し違うように感じました。
以下に使用しているソースを載せますので、
申し訳ございませんが、再度
アドバイス頂けると嬉しいです。


<SCRIPT language="JavaScript">
<!--
function up(text){
document.getElementById('te').innerHTML=text;
set.style.posLeft =document.body.scrollLeft+window.event.clientX+10;
set.style.posTop =document.body.scrollTop+window.event.clientY+10;
document.all('set').style.display="block";}
function kes(){document.all('set').style.display="none";}
//-->
</SCRIPT>

<DIV style="display:none;position:absolute;filter:Alpha(opacity=□);" ID="set">
<TABLE ALIGN="◆◆◆◆" VALIGN="△△△△" BGCOLOR="●●●●" cellspacing=▲▲ cellpadding=▽▽>
<TR><TD ALIGN="◆◆◆◆" VALIGN="△△△△" BGCOLOR="●●●●"><SPAN ID="te"></SPAN></TD></TR>
</TABLE>
</DIV>

<A HREF="××.html" onmouseover="up('説明文入力箇所')"; onMouseout="kes()"></A>

3   名前： 匿名 ： 2007/08/28（火） 13:33  ID:RRwY88x6 sub-Ax

SCRIPTタグで...
<SCRIPT language='javascript'>
とするのはよろしくない。
<SCRIPT type='text/javascript'>
にするべき。
(type='application/javascript'はＩＥではエラー?)

ID=setのオブジェクトを利用するときに
set.style....
とか
document.all('set').style...
とかはよろしくないので
２つとも
document.getElementById('set').style...
としましょ。
(なぜにteだけ、document.getElementById('te')...?)

posLeft, posTop より、left, top のほうがいいと思う。他のブラウザでも使えるし。
あと、個人的にはposition:absolute;のときはdisplayじゃなくvisibilityかな...。(visibilityがいいのか悪いのかは知らないが)


んで、内容を見てみますと…

[1]説明文のテキストを入れる。
[2]マウスの位置から表示する場所を計算し、説明文の位置( left(posLeft)、top(posTop) )に計算した値を入れる。
[3]説明文を表示する。

ってことですよね。
さっき私が言ったことと同じですよ。(使用しているプロパティなどが若干異なるけど、やってることは同じ)

あとは、さきほども言いましたが、
もしも説明文が表示されていなければ　→　表示する場所を計算して表示する。
既に表示されていたら　→　何もしない
という考えでいけばいいんじゃないかと。

(onmouseover=nullにする方法もあるけど...)

少し書き直してみました。
if文のなかはあえて書きません。
ヒントは６行上に書いてあります。
<SCRIPT type="text/JavaScript">
<!--
function up( text ){
    // ↓setオブジェクトを取得する
    var obj = document.getElementById( 'set' );
    // ↓条件分岐
    if( **** )
    {
        // ↓説明文をセット
        document.getElementById('te').innerHTML = text;
        // ↓(x,y)座標を計算して、setの位置を設定する
        obj.style.left = ( document.body.scrollLeft + window.event.clientX + 10 ) + 'px';
        obj.style.top = ( document.body.scrollTop + window.event.clientY + 10 ) + 'px';
        // ↓表示する。
        obj.style.visibility = "visible";
    }
}
function kes() { document.getElementById( 'set' ).style.visibility = "hidden"; }
//-->
</SCRIPT>

4   名前： 匿名 ： 2007/08/28（火） 13:33  ID:gaSskOiN sub-Cz
でしゃばってみる。

>>3
> (type='application/javascript'はＩＥではエラー?)

エラーではなく認識しないだけ。RFC 4329 で text/javascript は公式に廃止され、application/javascript もしくは application/ecmascript を使うと定められた。Gecko と Opera は対応済。Safari は XHTML モード時のみ対応。全く対応してないのは IE だけ。

> 個人的にはposition:absolute;のときはdisplayじゃなくvisibilityかな...。

絶対配置なら消す必要すらないよ。left: -9999px; とかで画面外に出せば十分。

また、現状 IE 専用の特殊コードなので、
onmouseover="up('説明文入力箇所', event)"

と書いてゴニョゴニョした方が良いのだが……ぶっちゃけ、>>2 のコードはいろんな意味で酷すぎるので、別のを探すことを強くおススメする。
5   名前： hisa ： 2007/08/28（火） 13:33  ID:7lDb3pRE sub-t1
匿名様、凄く沢山のヒントやアドバイスを
下さって本当に有難う御座いました！！
困っていたので心から感謝です！！！
頂いたアドバイスを基に頑張ってみようと思います！
一覧へ戻る