| 解 説 |
マウスが文字の上に乗ったら画像付きチップヘルプを表示するには、あらかじめ表示するヘルプ画像を用意しておきスタイルシートで見えない状態にしておきます。マウスが文字上に乗ったらonMouseoverイベントが発生するのでヘルプ画像を表示し、指定秒数後に消すようにタイマーを設定します。ただし、onMousoutイベントが発生したら設定したタイマーを解除しないと一瞬だけヘルプ画像が表示され消えてしまいます。
|
| コード |
<![CDATA[
<html>
<head>
<title>マウスが文字の上に乗ったら画像付きチップヘルプを表示する</title>
<script language="JavaScript"><!--
sec = 3 * 1000; // 秒数
timerID = 0;
function tipHelp(vType)
{
tHELP.style.visibility = vType;
if (vType == "visible")
{
tHELP.style.left = event.x;
tHELP.style.top = event.y;
timerID = setTimeout("tipHelp('hidden')",sec);
}else{
clearTimeout(timerID);
}
}
// --></script>
</head>
<body>
マウスが文字の上に乗ったら画像付きチップヘルプを表示<br>
<p onMouseover="tipHelp('visible')" onMouseout="tipHelp('hidden')">画像１</p>
<img id="tHELP" src="image.gif" width="161" height="134" style="position:absolute;visibility:hidden">
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View! |
マウスが文字の上に乗ったら画像付きチップヘルプを表示する