- ベストアンサー
マウスオンで説明文をページの真ん中に表示させたい！
- マウスオンで説明文をページの真ん中に表示させる方法について調べています。
- 特定の要素にマウスオンすると、その要素の近くに説明文が表示されるようにしたいです。
- 具体的には、リンクにマウスを乗せるとリンク先の説明が表示されるような仕組みを作りたいです。
- monti55
- お礼率49% (187/380)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
質問の内容を取り違えているかもしれませんが… とりあえず、「ここにマウス」のテキストにポインタが載ったら、中央に「Hello!!」の文字と、その右脇にリンクが表示されるようにし、それぞれのリンクにポインタが載ったときには、「Hello!!」の文字の左側に説明文が表示されるようにするソースに改造してみました。 以下のようにしてみてはいかがでしょうか。 <HTML> <HEAD> <SCRIPT><!-- function show(object) { if (document.layers && document.layers[object] != null){ document.layers[object].visibility = 'visible';} else if (document.all){ document.all[object].style.visibility = 'visible';} else if (document.getElementById){ document.getElementById(object).style.visibility = 'visible';} } function hide(object) { if (document.layers && document.layers[object] != null){ document.layers[object].visibility = 'hidden';} else if (document.all){ document.all[object].style.visibility = 'hidden';} else if (document.getElementById){ document.getElementById(object).style.visibility = 'hidden';} } //--></SCRIPT> <STYLE><!-- #myLayer1 { position: absolute; visibility: hidden; top: 150px; left: 300px; } #myLayer2 { position: absolute; top: 0em; left: 5em; } .myStyle { position: absolute; visibility: hidden; top: 150px; left: 100px; background-color: white; border: solid black 1px; padding: 0.5em; } //--></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で取ってあります。 見当違いでしたら、ごめんなさい。 長々と失礼しました。
