好きな場所に説明文を表示 

メニューに触れるとコメントが出ます。
コメントの位置やフォントサイズ・カラーは自由に決められますし、画像を使うこともできます。

メニュー1
メニュー2
メニュー3
コメント0
最初に表示されているメッセージです。


メニュー5
コメント00
最初に表示されているメッセージです。
1つのページにいくつでも設置できます。


出したい説明文を、以下のように書きます。

☆ 説明文を出したい場所に

<span id="msg0" style="display:block;
border:0px solid white;background-color:lightblue;">
最初に出ている文章。
通常通りタグを使えます。画像表示もOK
</span>

<span id="msg1" style="display:none;
border:0px solid white;background-color:lightblue;">
ここにメニュー1に触れたときのコメントを書きます。
タグ、画像OKです。
</span>

<span id="msg2" style="display:none;
border:0px solid white;background-color:lightblue;">
ここにメニュー2に触れたときのコメントを書きます。
</span>

以下同じように・・

ここで、「msg1,msg2,msg3」というのがそれぞれの文章の名前です。好きな名前に変えて構いませんが、重複しないようにしてください。
また、border:でこの文章の枠のサイズ、solid の後に枠の色、background-color: で背景の色を指定します。


メニューの方には、以下のように書きます。

☆ どこでも

<a href="リンク先URL" onmouseover="msg1.style.display='block';msg0.style.display='none'"
onmouseout="msg1.style.display='none';msg0.style.display='block'">
メニュー1</a>

<a href="リンク先URL" onmouseover="msg2.style.display='block';msg0.style.display='none'"
onmouseout="msg2.style.display='none';msg0.style.display='block'">
メニュー2</a>


ここで「msg1,msg2」は上で決めた、それぞれのメニューに対する文章の名前です。
「msg0」は最初から出ている文章で、カーソルを離した後にまた表示されます。
通常のリンクと同じく、画像に対してリンクを貼ることもできます。

このページの最初に例として出したもののソースファイルを圧縮して置いておきます。  → DownLoad
(圧縮ファイルの扱い方についてはこちらをご覧下さい。)