JavaScript Tips collection

「Tips表示関数」では表示する対象のレイアの位置は変化しませんでした。しかし、場合によってはマウス位置の近くに出したい場合もあるでしょう。

そこで、レイアの表示位置を指定できるようにしたものが「続Tips表示関数」です。 f(^^;

上の各文字列の上にマウスポインタを持っていくと、指定された場所にメッセージが表示されます。

以下は機能追加版 showTips関数のコードです。


// 旧バージョンの互換用
if(parseInt(navigator.appVersion)<4) event=null;
// Tips表示関数
function showTips(nm,e,ox,oy,pol){
  var div=getDivFromName(nm); if(!div) return;
  var al=arguments.length;
  var marginRight=20; // 右端のマージンサイズ( px )
      // 右端はスクロールバーが出ると隠れる可能性があるので
      // 右端にマージンをとっておく
  if(al>1){
    // 表示位置の指定あり
    if(!div.initS){ initDivSize(div); div.initS=true; }
    var ww=getWindowWidth(),    wh=getWindowHeight();
    var w =getDivWidth(div),    h =getDivHeight(div);
    var x =getLeftFromEvent(e), y =getTopFromEvent(e);
    if(al>4){                      // 配置情報あり
      if     (pol.indexOf('center')!=-1) x-=Math.floor(w/2);
      else if(pol.indexOf('right' )!=-1) x-=w+ox;
      else if(pol.indexOf('left'  )!=-1) x+=ox;
      if     (pol.indexOf('above' )!=-1) y-=h+oy;
      else                               y+=oy;
    }
    else if(al>3){ x+=ox; y+=oy; } // 配置情報なし
    if((x+w+marginRight)>ww) x=ww-w-marginRight;
    else if(x<0)         x=0;
    moveDivTo(div,x,y);
  }
  setDivVisibility(div,true);
}
// Tips消去関数
function hideTips(nm){
  setDivVisibility(getDivFromName(nm),false);
}

この文字の部分は「ライブラリ集」で紹介している関数です。上のスクリプトでは記述されていませんが、実際には「ライブラリ集」を参照して追加してください。

showTips関数とhideTips関数の呼出形式は以下の通りです。

showTips(nm[,e[,ox,oy[,pol]]]);
          []は省略可を意味します
  nm    : 表示状態にするレイアのID名
  e     : イベントオブジェクト
  ox,oy : マウスポインタの位置からの距離。
          ( マウスポインタから遠ざかる方向が正の方向 )
  pol   : 表示ポリシー。水平方向と垂直方向の指定の組合せ。
          省略値は 'leftbelow'。
          [水平方向]
            'left'   : レイアの左側をマウスポインタの位置に
            'center' : レイアの中央をマウスポインタの位置に
                       ( この指定では ox は無視される )
            'right'  : レイアの右側をマウスポインタの位置に

          [垂直方向]
            'below'  : マウスポインタの下にレイアを表示する
            'above'  : マウスポインタの上にレイアを表示する
  注 横方向のレイアの位置がウィンドウからはみ出る場合には
     位置が補正されます。

hideTips(nm);
  nm    : 表示状態にするレイアのID名

<style type="text/css"><!--
/* Tip表示する文字の装飾 */
A.tips{
  text-decoration:none;
  font-style:italic;
  color:#ff33cc;
}
/* Tip表示するレイアの定義と装飾 */
DIV.tips{
  position:absolute;
  visibility:hidden;
}
DIV.tips TABLE{ background-color:#ffffee; }
--></style>
<script language="JavaScript"><!--
if(document.all){
  var s='';
  if(document.getElementById){
    if(navigator.userAgent.indexOf('Mac')!=-1){
      // Mac版 IE5 は座標計算に問題があるので
      // マージン幅を 0 にしてバグ回避する
      s='BODY { margin:0px; }\n';
    }
  } else {
    // IE4 はレイアの幅を定義しないとページの端まで拡張されるので
    // 最小限の幅に調整するように width:1; を指定しておく
    s='DIV.tips{ width:1; }\n';
  }
  if(s!=''){
    document.write(
       '<style type="text/css">\n'
      +s
      +'<\/style>');
  }
}
// --></script>
    :
<p>...
<!-- 単に表示・非表示を切り替えるだけの場合 -->
<a class="tips"
   href="javascript:void(0);" onClick="return false;"
   onMouseOver="showTips('tips1');"
   onMouseOut ="hideTips('tips1');"
   >最も単純な Tip 表示</a>...
<br>
<!-- マウスの下に表示する場合 -->
<a class="tips"
   href="javascript:void(0);" onClick="return false;"
   onMouseOver="showTips('tips2',event,0,10,'center');"
   onMouseOut ="hideTips('tips2');"
   >真下に表示</a>...
</p>
<!-- Tip用レイアの定義 -->
<div class="tips" id="tips1">
<table border=1 cellspacing=0 cellpadding=3><tr><td nowrap><p>
最も単純なTips表示は<br>
単にレイアの表示・非表示を切替えるだけです。
</p></td></tr></table>
</div>
<div class="tips" id="tips2">
<table border=1 cellspacing=0 cellpadding=3><tr><td nowrap><p>
マウスポインタの位置に応じて<br>
表示位置を変えることができます。
</p></td></tr></table>
</div>

この文字の部分は必要に応じて修正します。

基本的には「Tips表示関数」と同じですので、ここでは異なる部分のみ説明しておきましょう。

レイアの定義方法では、「Tips表示関数」と同様にすると IE4 ではレイアの幅がページの右端まで伸長されます。このようなレイアは指定どおり配置する余地がないので、なるべく幅が大きくならないように指定します。

基本的には「Tips表示」と同じなので、ここではこの「続Tips表示」に特有の項目のみとします。それ以外の項目については「Tips表示」を参照して下さい。

この Tips表示とクライアントサイドクリッカブルマップを組合せれば、図表の簡単な説明( IMG の ALT みたいに )をすることも可能です。

「What's New」で表示するイメージにアンカータグを付けて、これに Tips表示を使用することもできます。

Cross Browser のための DHTML

続Tips表示関数