チップヘルプをじわじわ表示
原案:平井 公大 氏 (2000/11/23 登録)
マウスポインタが上が来るとヘルプを表示し、マウスポインタが離れるとヘルプが消えます。IEだとじわじわ表示します。
表示サンプル
ソース記述内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>チップヘルプをじわじわ表示</title>
<script type="text/javascript">
<!--
var noudo = 0;
function chgcol( tag ) {
arg = tag;
if( noudo > 100 ) {
clearTimeout();
return;
}
noudo += 3;
document.all(tag).filters["alpha"].opacity = noudo;
setTimeout( "chgcol( arg )", 5 );
}
function DM( tag, n ) {
noudo = n;
if ( document.all ) {
if ( document.all( tag ).style.visibility == "hidden" ) {
document.all( tag ).style.visibility = "visible";
chgcol( tag );
} else {
document.all( tag ).style.visibility = "hidden";
clearTimeout();
}
}
if ( document.layers ) {
if ( document.layers[tag].visibility == "hide" )
document.layers[tag].visibility = "show";
else document.layers[tag].visibility= "hide";
}
}
// -->
</script>
<style type="text/css">
<!--
a.pdown:link {
font-size: 12px;
text-decoration:none;
color: #FFFFFF;
}
a.pdown:visited {
font-size: 12px;
text-decoration:none;
color: #FFFFFF;
}
a.pdown:active {
font-size: 12px;
text-decoration:none;
color: #FF0000;
}
a.pdown:hover {
font-size: 12px;
text-decoration:none;
color: #990000;
}
td.menu {
line-heihgt:1.3em;
color:#ffffff;
}
-->
</style>
</head>
<body>
<div style="text-align: center; height:160px">
<div style="position:absolute; left:210px; top:360px; width:100px; background-color:#000000;
text-align:center; padding:2px; margin:0em" id="menu1">
<a href="JavaScript:void(0)" class="pdown" onMouseOver="DM('tag1', 0)" onMouseOut="DM('tag1', 0)">リンクA</a>
</div>
<div style="position:absolute; left:210px; top:430px; width:100px; background-color:#000000;
text-align:center; padding:2px; margin:0em" id="menu2">
<a href="JavaScript:void(0)" class="pdown" onMouseOver="DM('tag2', 0)" onMouseOut="DM('tag2', 0)">リンクB</a>
</div>
<div id="tag1" style="position: absolute; left:320px; top:360px; width:100px; visibility:hidden;
background-color:#00006f; text-align:center; margin:0em; filter:alpha()">
<table bgcolor="#00006F" width="100" cellpadding="2">
<tr>
<td align="left" class="menu"> リンクAはこんなページへのリンクです </td>
</tr>
</table>
</div>
<div id="tag2" style="position:absolute; left:320px; top:430px; width:100px; visibility:hidden;
background-color:#000000; text-align:center; margin:0em; filter:alpha()">
<table bgcolor="#00006F" width="100" cellpadding="2">
<tr>
<td align="left" class="menu"> リンクBはこんなページへのリンクです </td>
</tr>
</table>
</div>
</div>
</body>
</html>