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

トップ > How To > マウスを乗せると説明を表示する

説明

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

実例

SSI入門
CGI入門

ソースコード

<script>
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