メニューの説明をする

<html>
<head>
</head>
<body>
<br><br>
<center><hr>メニューの説明をする<hr><br>
リンクにマウスカーソルを重ねると説明を表示します。
<br><br>
<a href="new" onMouseover="document.form1.txtHelp.value='ツボを更新しました（５月１０日）'" onMouseOut="document.form1.txtHelp.value=''">新着情報</a><br>
<a href="diary" onMouseover="document.form1.txtHelp.value='毎日更新しています'" onMouseOut="document.form1.txtHelp.value=''">学習ダイアリー</a><br>
<a href="tubo" onMouseover="document.form1.txtHelp.value='５月１０日分をアップ。'" onMouseOut="document.form1.txtHelp.value=''">JavaScriptのツボ</a><br>
<a href="profile" onMouseover="document.form1.txtHelp.value='最終更新は５月７日です。'" onMouseOut="document.form1.txtHelp.value=''">プロフィール</a><br>
<br>
<form name="form1">
<textarea name="txtHelp" cols="40" rows="5"></textarea>
</form>
</center>
</body>
</html>
【解説】
赤字部分は、マウスカーソルを置いたときに行う処理、（onMouseover)
青字部分は、マウスカーソルが離れたときに行う処理、（onMouseOut）大文字に注意
緑字部分は、リンク先のアドレス、<a href="○○"
太字は変更可能なところを示しました。
マウスが離れると文字は消えるように見えますが、ちゃんと書き込みの処理をしています。
空白を書き込むことによって消えるように見せているのですね。

戻る