メニューの説明をする(URL表示)

<html>
<head>
</head>
<body>
<br><br>
<center><hr>メニューの説明をする<hr><br>
リンクにマウスカーソルを重ねると飛び先URLが表示されます。
<br><br>
<a href="whatsnew.htm" name="lnkWhatNew"
onMouseover="document.form1.txtUrl.value=document.links[0].href" onMouseOut ="document.form1.txtUrl.value=''">新着情報</a><br>

<a href="diary.htm"
onMouseover="document.form1.txtUrl.value=document.links[1].href" onMouseOut ="document.form1.txtUrl.value=''">気まぐれ日記</a><br>

<a href="bbs.htm"
onMouseover="document.form1.txtUrl.value=document.links[2].href" onMouseOut ="document.form1.txtUrl.value=''">掲示板</a><br>

<a href="chat.htm"
onMouseover="document.form1.txtUrl.value=document.links[3].href" onMouseOut ="document.form1.txtUrl.value=''">チャット</a><br>

<br>
<form name="form1">
<input type="text" name="txtUrl" size="50">
</form>
</center>
</body>
</html>
【解説】
一つの行に＝が４つもあり非常に複雑です。
ただ、マウスをのせたときと離れたときで２つに分かれているので
実質上は２つです。
document.links[0].hrefは、URLを取得する処理をしています。
［０］は１番目を表します。順番通りすればいいのですが、
わざと番号を変えてみるとどこが何番目かわかると思います。
hrefプロパティをつけておくことによりURLが全て表示されるようになります。

テキストの記述より短縮していますが問題なく動作します。

戻る