リンク先の説明をテキストボックスに表示
表示の例
テストページ1へ
テストページ2へ
テストページ3へ
マウスポインタをリンク文字にのせた時、テキストボックスにリンク先の説明を表示させます。
このテキストボックスのソースは下のようになります。
表示させたい場所のHTMLソースに貼り付けましょう。
(必ず一度メモ帳などに貼り付けてから、あなたのページのHTMLソースに貼り付けてください)
ソース
<FORM name="link">
<INPUT type="text" name="menu" size="40" value="" style="border-style:solid; border-width:1px; border-color:#3366FF; background:#FFFFFF; font-size:10pt; color:#3366FF">
</FORM>
value="" の部分はテキストボックスにまず最初に表示されるコメントの部分ですから、もし表示したいコメントがあれば " と " の間にコメントを書いてください。
下の表を見てあなたのお好みにかえてみましょう。
テキストボックスの外枠の太さ border-width:1px の 1
テキストボックスの外枠の色 border-color:#3366FF の #3366FF
テキストボックスの背景の色 background:#FFFFFF の #FFFFFF
テキストボックスの文字の大きさ font-size:10pt の 10
テキストボックスの文字の色 color:#3366FF の #3366FF
テキストボックスのサイズ size="40" の 40
リンク文字のソースは下のようになります。
ソース
<a href="test1.html" onMouseOver="document.link.menu.value=' テストページ1の説明が表示されます'" onMouseOut="document.link.menu.value=''">テストページ1へ</a>
リンク先は、a href="test1.html"の test1.html をリンクさせたいファイル名にかえてください。
この例では、テストページ1へ がリンク文字になりますから、あなたの好きな文字にかえてください。
onMouseOver="document.link.menu.value=' テストページ1の説明が表示されます'" の部分が、マウスポインタをのせた時にテキストボックスに表示されるコメントです。赤い文字のところを表示したいコメントにかえてください。
onMouseOut="document.link.menu.value=''" の部分は、マウスポインタがはなれた時にテキストボックスに表示されるコメントの部分ですから、もし表示したいコメントがあれば ' と ' の間にコメントを書いてください。
ホームページお役立ち小技集のTOPへ