フォーラム@nifty | フォーラム・サークル | サイトマップ | ヘルプ |
掲示板 コラム お役立ち イベント リンク   | FHPGサイトマップ | お問い合わせ |
TOP > お役立ち > JavaScriptのおもちゃ箱 > チップヘルプをじわじわ表示  

チップヘルプをじわじわ表示

原案:平井 公大 氏 (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>
個人情報保護ポリシー
Copyright© NIFTY 2006 All Rights Reserved.
Copyright© FHPG 2006 All Rights Reserved.