Cross Browser のための DHTML

・Tips表示

説明などの文章で、注釈文のように必須の項目ではないが、 書くと煩雑になるのであまりゴチャゴチャ書きたくないような場合には レイアの visibility 制御で比較的簡単にページをすっきりさせることができます。

例えば 下の例のような感じです。 f(^^;

Tips 表示

通常の表示は「Tips表示」だけですが、
マウスで触れると、こんな説明文が表示されるわけです。(^o^)

上の「Tips表示」の文字列の上にマウスポインタを持っていくと、 メッセージが表示されます。

これは、リンクタグ（ Aタグ ）を利用して onMouseOver,onMouseOutメソッドでレイアの表示制御をする例です。

下のスクリプトは visibility制御を行う ShowTips関数のコードです。

<script language="JavaScript"><!--
function showTips(nm){
  var style=document.getElementById?
              document.getElementById(nm).style:(
                document.all?document.all(nm).style:(
                  document.layers?document.layers[nm]:null
                  )
              );
  if(style) style.visibility='inherit';
}
function hideTips(nm){
  var style=document.getElementById?
              document.getElementById(nm).style:(
                document.all?document.all(nm).style:(
                  document.layers?document.layers[nm]:null
                  )
              );
  if(style) style.visibility='hidden';
}
// --></script>

showTips関数は指定されたレイアを表示する関数で、 hideTips関数は逆に非表示状態にする関数です。

呼出形式は以下の通りです。 

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

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

使用方法

例えば、冒頭の例のようにリンク部分に触れると表示する場合は以下のようにします。 

<head>
    :
<style type="text/css"><!--
/* Tip表示する文字の装飾 */
A.tips{
  text-decoration:none;
  font-style:italic;
  color:#ff33cc;
}
/* Tip表示するレイアの定義と装飾 */
DIV.tips{
  position:absolute;
  visibility:hidden;
  border:1px solid #3333cc;
  padding:5;
  background-color:#ffffcc;
  layer-background-color:#ffffcc;
}
--></style>
    :
</head>
<body ...>
    :
<!-- Tip表示対象のリンクの定義 -->
<a class="tips"
   href="javascript:void(0);" onClick="return false;"
   onMouseOver="showTips('tip1');"
   onMouseOut ="hideTips('tip1');"
>Tips表示</a>
    :
<!-- Tipレイアの定義 -->
<div class="tips" id="tip1">
通常の表示は「Tips表示」だけですが、<br>
マウスで触れると、こんな説明文が表示されるわけです。
</div>
    :

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

まず、Aタグのスタイルの定義( A.tips )は必須ではありません。 しかし、別ページにジャンプするためのリンクと Tip表示のためのリンクを 識別できるようにしておいた方が良いでしょう。

#> Tip表示を期待してマウスを移動させたら、 ただのハイパーリンクで拍子抜けにならないようにね〜 (^^;

Tip表示用レイアのスタイル定義( DIV.tips )では、 表示する内容やスタイルに合わせて適当(笑)に調整しますが、 position:absolute; と visibility:hidden; は必須です。
また、レイアは何も指定しないと背景が透明になりますから、 必ず背景色( background-color, layer-background-color )を指定しておきます。

Aタグの定義( Aタグ )については、showTips関数、hideTips関数を呼び出すだけですが、 特にジャンプ先がない場合には href="javascript:void(0);" を指定します。 更に、ページ内にアニメーション GIF 等がある場合は onClick="return false;" を指定しておきます。

Tip表示するレイア( DIVタグ )に関しては、内容は自由ですが、 必ず ID属性を指定します。

使い方としては、この他にも FORM のボタン操作やリンクのクリックなどアイディア次第で 色々な方法が考えられますがいずれの場合も表示するレイアを定義しておき、 表示したいタイミングで showTips関数を、非表示にしたいタイミングで hideTips関数を呼び出せばＯＫです。

注意事項

Copyright(c) 1998 - 2001 ShinSoft. All rights reserved.