リンクに対する説明を表示

リンク・画像(IEのみ)にマウスカーソルを乗せると、説明を表示します。

ステータスバーに表示

おまけのページに戻る。

アラートを表示

おまけのページに戻る。

おまけのページに戻る。

[解説] JavaScriptではイベントハンドラonMouseOverによって、マウスがリンクなどのアンカー上に来た時に、解説を表示します。onMouseOutはマウスが離れた時に使います。この場合は、マウスが離れた時にステータスバーのメッセージを消すのに使用しています。

Source

<html>
<head>
<script language="javascript">
<!--
function setStatus1()
{
status="このようにステータスバーに表示します。"
};
function setStatus2()
{
status=" "
};
//-->
</script>
</head>
<body>
<center>
<table border="1" cellspacing="1" cellpadding="5" bgcolor="#F0FFFF">
<tr>
<td>
ステータスバーに表示
</td>
<td>
<img src="sen.jpg" width="302" height="211" onMouseOver="setStatus1()" onMouseOut="setStatus2()">
<p align="center">
<a href="omake.htm" onMouseOver="setStatus1()" onMouseOut="setStatus2()">
おまけのページに戻る。</a>
</p>
</td>
</tr>
<tr>
<td>
アラートを表示
</td>
<td >
<img src="sen.jpg" width="302" height="211" onMouseOver="alert('このようにメッセージを表示します。OKを押すと消えます。')">
<p align="center">
<a href="omake.htm" onMouseOver="alert('触るとこれが出るので、リンクに辿り着くには、カーソルをリンクに置いた状態でENTERを押して下さい。アラートが消えますので、そのままダブルクリック。')">おまけのページに戻る。</a>
</p>
</td>
</tr>
</table>
</center>
</body>
</html>