リンク編　3　「リンクの箇所にマウスを乗せて特定の部分にメッセージを出す」


	前のテクニックに「ステータスバーに文字を挿入する」を紹介しました。今度のテクニックはそれを応用し、もう一歩進めました。リンクが張られている文字や画像にマウスを乗せると、ステータスバーではなく、同じホームページの指定された部分に、特徴やメッセージなどの説明を表示させることができるのです。このとき、ステータスバーは通常と同じく、リンク先を表示しますので、ステータスバーに説明はどうも・・・と遠慮がちだった人でもこれならばOKなのです。

リンクの設定とメッセージを設定する部分を先に決めておきます

<a href="●●.html(リンク先のアドレスを入力)" onMouseOver="msg.innerHTML='ここか今一番おすすめ!!(メッセージ文を入力)'"onMouseOut="msg.innerHTML=''">●●(リンクとして設定する文字</a>

上の設定後、メッセージを表示させる部分を指定するタグを、次のように書きます

(メッセージを表示させたい部分のタグにこれを記入)

<span id="msg"></span>

<a href="　…から始まるHTMLタグは、皆さんご存知の、ターゲットへのリンクの設定をする　という意味です。
このテクニックは、リンクを設定するタグの応用なのです。
ここで重要なのが、他のテクニックでもちらほらと出てきた　「onMouseOver」や「omMouseOut」。　他にも「onclick」など色々ありますが、この言葉から、大体の意味は分かると思います。

今回のテクニックで使われるこの「onMouseOver」と「onMouseOut」。この2つのタグを｢リンクを設定する｣意味の　<a href　にオプションとして加えることで、今回のようなテクニックが実現できます。
onMouseOver　のあとに水色の文字で(メッセージ文を入力)　とありますね。ここにメッセージを表示する文字を書き込みます。

また、メッセージを表示する部分に　<span　…から始まるタグを書き込むことで、この部分にメッセージを表示させることが出来ます。

「onMouseOver」と「onMouseOut」

onMouseOverとは、これを設定したマテリアル(つまり、文字やテキストなど)に｢マウスが乗っかる｣という意味。
また、onMouseOutとはその逆に、設定したマテリアルから「マウスが離れる」ということです。