| リンク先の説明をテキストで表示 |
| 表示の例 |
|
|
| マウスポインタをリンク文字にのせた時、リンク先の説明をテキストで表示させます。 |
|
|
|
|
|
|
| 説明のテキストは表の中に表示されます。 |
| 下のソースを表示させたい場所の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='テストページ１の説明が表示されます'" onMouseOut="d1.innerHTML=''">テストページ１へ</a> |
|
|
| リンク先は、a href="test1.html"の test1.html をリンクさせたいファイル名にかえてください。 |
| この例では、テストページ１へ がリンク文字になりますから、あなたの好きな文字にかえてください。 |
| onMouseOver="d1.innerHTML='テストページ１の説明が表示されます'" の部分が、マウスポインタをのせた時に表示されるコメントです。赤い文字のところを表示したいコメントにかえてください。
|
| onMouseOut="d1.innerHTML=''" の部分が、マウスポインタがはなれた時に表示されるコメントの部分ですから、もし表示したいコメントがあれば ' と ' の間にコメントを書いてください。 |
|
| ホームページお役立ち小技集のTOPへ |
