マウスポインタが上に来るとチップヘルプを表示
原案：平井 公大 氏 （2000/09/16 登録）
マウスポインタがリンクの上に来ると短い説明が表示される、いわゆるチップヘルプです。考え方としては、イベントが起きた時に、スタイルシートで非表示にしているレイヤをマウスポインタの位置に表示しています。
表示サンプル
ソース記述内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>マウスポインタが上に来るとチップヘルプを表示</title>
<style type="text/css">
<!--
div.CHIPHELP {
position : absolute;
visibility : hidden;
background-color:#EFEFDF;
padding: 4px;
margin : 0em;
}
// -->
</style>
<script type="text/javascript">
<!--
var V="";
if ( document.layers ) V="nn";
else if ( document.all ) V="ie";
else V ="no";
function ch(a,b,x,y) {
if ( V=="nn") {
document.layers[a].x=x;
document.layers[a].y=y;
document.layers[a].visibility = b;
}
if ( V=="ie") {
document.all(a).style.pixelLeft = x;
document.all(a).style.pixelTop = y;
document.all(a).style.visibility = b;
}
}
// -->
</script>
</head>
<body>
<div style="text-align:center">
<p><a href="#" onMouseOver="if ( V !='no' ) ch('d1','visible',event.x,event.y)" onMouseOut ="if ( V !='no' ) ch('d1','hidden',0,0)">チップヘルプ１</a></p>
<p><a href="#" onMouseOver="if ( V !='no' ) ch('d2','visible',event.x,event.y)" onMouseOut ="if ( V !='no' ) ch('d2','hidden',0,0)">チップヘルプ２</a></p>
</div>
<script language="JavaScript">
<!--
if ( V !="no" ) {
document.write("<div class='CHIPHELP' id='d1'>チップヘルプ１だよ</div>");
document.write("<div class='CHIPHELP' id='d2'>チップヘルプ２だよ</div>");
}
// -->
</script>
</body>
</html>
