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

解決済

質問者：monti55
質問日時：2003/04/27 10:27
回答数：1件

よろしくお願いします。

http://www4.ocn.ne.jp/~tomotan/tagpractice.html

（↑）このサイトで

<HTML>
<HEAD>
<SCRIPT></SCRIPT>
<STYLE></STYLE>
</HEAD>
<BODY>
<A HREF="#" onMouseover="show('myLayer1')"
onMouseout="hide('myLayer1')">ここにマウス</A>
<DIV ID="myLayer1" CLASS="myStyle">
Hello!!
</DIV>
</BODY>
</HTML>

を表示させると、「Hello!」の文字が「テキスト」の右側に表示されます。
そうじゃなくて、「Hello!」の右側にリンクを箇条書きに書き込んでいきたいんです。

で、リンクにマウスを乗せると左側にリンク先の説明が表示される・・・というふうにしたいんです。

お願いしますｍ（＿＿）ｍ

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： lead1976
回答日時：2003/04/28 00:58

質問の内容を取り違えているかもしれませんが…

とりあえず、「ここにマウス」のテキストにポインタが載ったら、中央に「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で取ってあります。

見当違いでしたら、ごめんなさい。長々と失礼しました。