好きな場所に説明文を表示 メニューに触れるとコメントが出ます。
コメントの位置やフォントサイズ・カラーは自由に決められますし、画像を使うこともできます。
|
メニュー1 メニュー2 メニュー3 |
コメント0 最初に表示されているメッセージです。 |
|
メニュー5 |
|
コメント00 最初に表示されているメッセージです。 １つのページにいくつでも設置できます。 |
☆ 説明文を出したい場所に
|
<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
(圧縮ファイルの扱い方についてはこちらをご覧下さい。)