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

■ 説明

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

■ 実例

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

■ ソースコード

<SCRIPT LANGUAGE="JavaScript">
<!--
function show(id, flag) {
  if (document.all) {
    document.all.item(id).style.visibility = "visible";
  }
  if (document.layers) {
    document.layers[id].visibility = "show";
  }
}
function hide(id, flag) {
  if (document.all) {
    document.all.item(id).style.visibility = "hidden";
  }
  if (document.layers) {
    document.layers[id].visibility = "hide";
  }
}
// -->
</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)、NN4.0(Win)で動作確認しています。また、IE2.0(Win)、NN2.0/3.0(Win)では最初から説明文が表示されている状態になりますが、スクリプトエラーが発生しないことを確認しています。

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