梅ちゃん堂 > JavaScript 入門 > 実用 JavaScript サンプル >
- マウス応答メニュー -
はじめに
サイトマップ
ゲーム集
リンク
プロフィール

左のサンプルのように、ハイパーリンクにマウスを当てるとリンク先の紹介文を表示するプログラムです。 Internet Explorer 4.x 以上、Netscape 4.x 以上、Opera 6.x 以上で動作します。

テーブルとレイヤーを使用しています。この手のプログラムには様々なやり方がありますが、 Netscape 4.x や Opera 6.x でも動作するものとなると、プログラムが複雑になりすぎたり、ブラウザによっては読み込みに時間がかかったりします。

ここで紹介するサンプルは、簡単なプログラムで反応するクロスブラウザなマウス応答メニューを目指したものです。

作り方

次のスクリプトを HTML のヘッダ部分に入れます。

<SCRIPT type="text/javascript">
<!--

function appear(identifier, event) {
  if(document.getElementById)
    document.getElementById("num_" + identifier).style.visibility = "visible";
  else if(document.all)
    document.all("num_" + identifier).style.visibility = "visible";
  else if(document.layers) {
    with(document.layers["num_" + identifier]) {
      moveTo(140, event.pageY); // 左の 140 という数字はレイヤーの左位置です(Netscape 4.x 専用)。適当に調節して下さい。
      visibility = "show";
    }
  }
}

function vanish(identifier) {
  if(document.getElementById)
    document.getElementById("num_" + identifier).style.visibility = "hidden";
  else if(document.all)
    document.all("num_" + identifier).style.visibility = "hidden";
  else if(document.layers)
    document.layers["num_" + identifier].visibility = "hide";
}

//-->
</SCRIPT>

次に、テーブルを使ってメニュー一覧を作ります。

<TABLE align="left" border=0 cellpadding=3 cellspacing=0 width="150" bgcolor="#dddddd">
<TR>
<TD style="text-align:left; text-indent: 1em;">
<A href="***" onMouseOver="appear(0, event)" onMouseOut="vanish(0)">メニュー1</A>
</TD>
<TD>
<SPAN id="num_0" style="position:absolute; visibility:hidden; border:solid thin; padding:5pt; width:200px; background-color:#FFFFEE;">紹介文1</SPAN>
</TD>
</TR>

<TR>
<TD style="text-align:left; text-indent: 1em;">
<A href="***" onMouseOver="appear(1, event)" onMouseOut="vanish(1)">メニュー2</A>
</TD>
<TD>
<SPAN id="num_1" style="position:absolute; visibility:hidden; border: solid thin; padding:5pt; width:200px; background-color:#FFFFEE;">紹介文2</SPAN>
</TD>
</TR>

<TR>
<TD style="text-align:left; text-indent: 1em;">
<A href="***" onMouseOver="appear(2, event)" onMouseOut="vanish(2)">メニュー3</A>
</TD>
<TD>
<SPAN id="num_2" style="position:absolute; visibility:hidden ;border:solid thin; padding:5pt; width:200px; background-color:#FFFFEE;">紹介文3</SPAN>
</TD>
</TR>
    ・
    ・
    ・
</TABLE>

各々メニュー紹介文に適当な文句を入れます。 <TABLE> タグの属性の値や style 属性の値は自由に変更できます。 但し、<SPAN> タグの style 属性にある "position: absolute;" だけは必ず入れて下さい。

<SPAN id=〜 </SPAN> の部分がマウスに反応して表示される紹介文に当たります。 ここでの style 属性は必ずタグの中に入れるのがコツです。

マウスカーソルがハイパーリンクの上に来ると(onMouseOver)、関数 appear( ) が呼び出されます。 マウスカーソルがハイパーリンクから外れると(onMouseOut)、関数 vanish( ) が呼び出されます。 appear( ) の最初のパラメータと、vanish( ) のパラメータにある数字が <SPAN> タグの id 属性の値 "num_数字" に対応しています。

appear(0, event) ←→ vanish(0) ←→ SPAN id="num_0"

これらが個々に対応していないと正常に動作しません。

前ページに戻る 前ページに戻る 次ページに進む
Copyright © 2003 梅ちゃん堂. All Rights Reserved