マウスオンで説明文をページの真ん中に表示させたい！

2003/04/27 10:27

このQ&Aのポイント

マウスオンで説明文をページの真ん中に表示させる方法について調べています。
特定の要素にマウスオンすると、その要素の近くに説明文が表示されるようにしたいです。
具体的には、リンクにマウスを乗せるとリンク先の説明が表示されるような仕組みを作りたいです。

monti55
お礼率49% (187/380)

JavaScript
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#199778

2003/04/28 00:58 回答No.1

質問の内容を取り違えているかもしれませんが… とりあえず、「ここにマウス」のテキストにポインタが載ったら、中央に「Hello!!」の文字と、その右脇にリンクが表示されるようにし、それぞれのリンクにポインタが載ったときには、「Hello!!」の文字の左側に説明文が表示されるようにするソースに改造してみました。以下のようにしてみてはいかがでしょうか。 <HTML> <HEAD> <SCRIPT></SCRIPT> <STYLE></STYLE> </HEAD> <BODY> <A HREF="#" onMouseover="show('myLayer1')" onClick="hide('myLayer1'); return false;">ここにマウス</A> <DIV ID="myLayer1"> Hello!!  <ul id="myLayer2"> <li><a href="#" onMouseover="show('linkexp1')" onMouseout="hide('linkexp1')">リンク1</a></li> <li><a href="#" onMouseover="show('linkexp2')" onMouseout="hide('linkexp2')">リンク2</a></li> <li><a href="#" onMouseover="show('linkexp3')" onMouseout="hide('linkexp3')">リンク3</a></li> </ul>  </DIV>  <p id="linkexp1" class="myStyle">リンク1の説明</p> <p id="linkexp2" class="myStyle">リンク2の説明</p> <p id="linkexp3" class="myStyle">リンク3の説明</p>  </BODY> </HTML> リンクを増減する場合は、リンクの説明文がいるものについては、説明文を例中のリンクの説明文の箇所のところにあるように書き込んで、その要素にIDを適宜設定してください。また、リンクの方は、例中のリンクのリスト内に記述し、説明文を用意してある場合は、「onMouseover="show('説明文のID')" onMouseout="hide('説明文のID')"」をタグ内に入れてください。あとの細かい表示設定などは、スタイルシートで調整すればよいと思います。なお、上記ソースは質問文中のソースを元に作りましたが、元のソースから2点変更した点があります。元の質問文中のソースでは、「ここにマウス」の文字からポインタが離れると、表示させた文字やリンクがまた隠れてしまいます。このままでは箇条書きのリンクが表示されても、そのリンクに触れることができないので、クリックしたときに隠すような形に直してあります。この動作が必要なければ、該当部分の「hide('myLayer1'); 」この部分を削除してください。また、元のスクリプトでは、Netscape6以降では動作しないと思われるので、Netscape6以降でも動作するように少し改造しました。一応、動作確認はIE6、Netscape7、Opera6.05で取ってあります。見当違いでしたら、ごめんなさい。長々と失礼しました。

ログインすると、全ての回答が全文表示されます。