リンク先の説明をテキストで表示
表示の例
 
テストページ1へ
テストページ2へ
テストページ3へ
マウスポインタをリンク文字にのせた時、リンク先の説明をテキストで表示させます。
説明のテキストは表の中に表示されます。
下のソースを表示させたい場所のHTMLソースに貼り付けましょう。
(必ず一度メモ帳などに貼り付けてから、あなたのページのHTMLソースに貼り付けてください)
ソース
<table border="0" cellpadding="0" cellspacing="0" height="15">
<tr>
<td><div align="center" class="link" id="d1"></div></td>
</tr>
</table>
リンク先の説明を表示するところの、文字の色・サイズ・背景の色を指定します。
下のソースをHEAD区間に貼り付けましょう。
ソース
<STYLE type="text/css">
<!--
.link {color:#3366FF; font-size:13px; background-color:#FFFFFF}
-->
</STYLE>
下の表を見てあなたのお好みにかえてみましょう。
文字の色 color:#3366FF の #3366FF
文字の大きさ font-size:13px の 13
背景の色 background-color:#FFFFFF の #FFFFFF
リンク文字のソースは下のようになります。
ソース
<a href="test1.html" onMouseOver="d1.innerHTML='テストページ1の説明が表示されます'" onMouseOut="d1.innerHTML=''">テストページ1へ</a>
リンク先は、a href="test1.html"の test1.html をリンクさせたいファイル名にかえてください。
この例では、テストページ1へ がリンク文字になりますから、あなたの好きな文字にかえてください。
onMouseOver="d1.innerHTML='テストページ1の説明が表示されます'" の部分が、マウスポインタをのせた時に表示されるコメントです。赤い文字のところを表示したいコメントにかえてください。
onMouseOut="d1.innerHTML=''" の部分が、マウスポインタがはなれた時に表示されるコメントの部分ですから、もし表示したいコメントがあれば ' と ' の間にコメントを書いてください。
ホームページお役立ち小技集のTOPへ