奥義「澪標」（みおつくし）
〜リンク先の説明〜
リンク先に説明をつける
トップページなどでリンク先について説明する、
自分でホームページを作っていれば一度は体験することだろう。
しかし、更新を重ねて項目が増えてくると
リンク先の説明がページのレイアウト上負担になってくることも出てくるだろう。

また、普通に<table>タグを使って説明するだけではつまらない、
そう感じることもあるだろう。

ハイパーリンクの上にカーソルを持ってくるだけで説明が出る、
それを可能にするのがこの技である。

技の名前の由来
「澪標」（みおつくし）
海上の航路上にある案内用の杭のこと。
歴史は古く、平安時代以前から存在する。
和歌などでも「身を尽くし」とかけて詠まれることもあるほど
生活に密着していた。

ちなみに現在ではブイが使われているが、
これを「澪標」と呼ぶことはまずない。

ん？何でこんな意味のないことを書くか？
まあこのページ内にリンクをつけるために
「リンク先に説明をつける」以外の項目がほしかった、ということと
ただの行数かせぎ、と言えば納得していただけるだろうか？

リンク先の説明〜簡易版〜
ハイパーリンクに説明をつける方法で一番簡単なものは
<a>タグの属性「title」を使った方法である。




ハイパーリンクに説明をつける<Br>
<Br>
<A Href="mio.html#top" Title="このページの最初に戻る">
リンク先に説明をつける
</A><Br>
<A Href="mio.html#name" Title="一つ上の項目へ">
技の名前の由来
</A><Br>
<A Href="mio.html#kan" Title="ここ">
リンク先の説明〜簡易版〜<Br>
</A>



ハイパーリンクに説明をつける




リンク先に説明をつける



技の名前の由来



リンク先の説明〜簡易版〜



リンクの上にカーソルを置くと説明が出てきます



リンクの上にカーソルを置くと確かにメッセージが出てくるが、
ある程度時間がたつと消えてしまうし、
それに説明が出てくるまで少し時間がかかる。

そこで次を見てもらいたい

奥義「澪標」（みおつくし）〜「案内板」の作成〜



ハイパーリンクに説明をつける




リンク先に説明をつける



技の名前の由来



リンク先の説明〜簡易版〜



案内板




リンクの上にマウスポインタを持っていくと「案内板」に説明が出ます。

案内板の大きさは縦：90ピクセル横：370ピクセルです。

また、何らかの理由でうまく案内板に表示できなかったときのことを考え

<a>タグの属性「title」も併用しています。

詳しい説明は下を参照してください。




ハイパーリンクに説明をつける<Br>
<Br>
<A Href="mio.html#top" Title="最初に戻る" onMouseOver="msg.innerHTML='最初に戻る'" onMouseOut="msg.innerHTML=''">
リンク先に説明をつける
</A><Br>
<A Href="mio.html#name" Title="二つ上の項目へ" onMouseOver="msg.innerHTML='二つ上の項目へ'" onMouseOut="msg.innerHTML=''">
技の名前の由来
</A><Br>
<A Href="mio.html#kan" Title="一つ上の項目へ" onMouseOver="msg.innerHTML='一つ上の項目へ'" onMouseOut="msg.innerHTML=''">
リンク先の説明〜簡易版〜<Br>
</A>
<Br>案内板<Br>
<table border=1 WIDTH="370" height="90"><tr>
<TD bgcolor="#DDFFDD">
<DIV ID="msg" STYLE="font-weight:bold; font-size:14pt; font-family:ＭＳ Ｐ明朝;">
</div>
</table>


<a>タグの中に「onMouseOver」「onMouseOut」を書き込み、その中に表示する説明を書き込む。

なお、このときに「msg」という説明を表示する場所の設定を忘れると

エラーになるので注意。



「onMouseOver」「onMouseOut」内に書き込んだ説明は「ID="msg"」と書き込んだ場所に表示される。

ただ、これはタグの属性であって単独では使うことができないため

<div>タグの中に書き込むことによって使用が可能となる。



また、このときに表示する説明の書式を設定するなら

「STYLE」という属性を使うことによって可能になる。

このときの書式の設定方法はスタイルシートと同じなため、

使用するにはスタイルシートの知識が必要である。
onMouseOver：マウスポインタがリンクの上に来たときに表示（例：'最初に戻る'）
onMouseOut：マウスポインタがリンクの上から離れたときに表示（例：''＝何も表示しない）
msg：メッセージを表示する場所の名前。<div>タグなどの属性「ID」といっしょに使う
STYLE：文字のサイズ・太さ・書体などの書式を設定する
ここでは「太字、サイズ：14ポイント、明朝体」という設定になっている