## マウスを乗せると説明を表示する

トップ > アラカルト > マウスを乗せると説明を表示する

#### ■ 説明

リンクにマウスを乗せた時に、リンクの説明を表示します。Internet Explorer 4.0〜、Netscape Communicator 4.0〜で利用できます。

#### ■ 実例

SSI入門 - 「とほほのSSI入門」にジャンプします。
CGI入門 - 「とほほのCGI入門」にジャンプします。

#### ■ ソースコード

    <script language="JavaScript">
    <!--
    function show(id) {
      if (document.all) {
        document.all.item(id).style.visibility = "visible";
      }
      else if (document.layers) {
        document.layers[id].visibility = "show";
      }
      else if (document.getElementById) {
        document.getElementById(id).style.visibility = "visible";
      }
    }
    function hide(id) {
      if (document.all) {
        document.all.item(id).style.visibility = "hidden";
      }
      else if (document.layers) {
        document.layers[id].visibility = "hide";
      }
      else if (document.getElementById) {
        document.getElementById(id).style.visibility = "hidden";
      }
    }
    // -->
    </script>
    <a href="wwwssi.htm"
       onmouseover="show('id1')"
       onmouseout="hide('id1')">SSI入門</a>
    <span id=id1 style="visibility:hidden">
    <ilayer name=id1 visibility="hide">
     - 「とほほのSSI入門」にジャンプします。
    </ilayer>
    </span>
    <br>
    <a href="wwwcgi.htm"
       onmouseover="show('id2')"
       onmouseout="hide('id2')">CGI入門</a>
    <span id=id2 style="visibility:hidden">
    <ilayer name=id2 visibility="hide">
     - 「とほほのCGI入門」にジャンプします。
    </ilayer>
    </span>

#### ■ 動作確認

IE4.0/5.0(Win)、IE4.0(Mac)、Netscape 4.0/6.01/7.0(Win) で動作確認しています。また、IE2.0(Win)、Netscape 2.0/3.0(Win)、JustView 3.01 では最初から説明文が表示されている状態になりますが、スクリプトエラーが発生しないことを確認しています。

Netscape 4.0(Win)では、<layer> と <span> の入れ子関係を逆にすると、何故だか、それ以降のスタイルシートが一部無効になってしまうというバグがあるようです。

Netscape 6.0(Win)では、リンクの下線が消えてしまうというバグがあるようです。

Copyright (C) 1996-2003 杜甫々
最終更新：2003年3月21日
http://www.tohoho-web.com/wwwxx023.htm