いるかのお礼

この度はいるかをいただきまして、ありがとうございます。
お礼にというのもなんですが、若干の改良を加えたコードを貼っておきます。


変更点

  1. 階層を簡単に増やせるように、変数を配列にした。
  2. それにともない関数も１つにまとめ、かわりに引数を追加した。
    • myID : 表示するタグのID
    • myNo : 表示するタグの階層数(第２階層なら2を入れる)


「同じような処理」がたくさんあるとき、まとめられるかどうか考えるようにするとよいでしょう。
コードの行数が減ると、バグも減ります。また、バグが出ても見つけやすくなります。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=x-sjis">
<TITLE></TITLE>
<style>
body{padding:40px;font-family:Verdana;font-size:11pt;line-height:150%;}
span{visibility:hidden;position:absolute;background:white;z-index:1;}
a{color:#666666;text-decoration:none;}
a:hover{color:black;}
</style>
</HEAD>
<BODY>
<SCRIPT language="JavaScript"><!--
myObj = new Array();

myOP = window.opera;            // OP
myN6 = document.getElementById; // N6
myIE = document.all;            // IE
myN4 = document.layers;         // N4
if (myOP) myBR="N6";      // ブラウザは OP6以上
else if (myIE) myBR="I4"; // ブラウザは IE4以上
else if (myN6) myBR="N6"; // ブラウザは NS6以上
else if (myN4) myBR="N4"; // ブラウザは NN4
else myBR="";             // ブラウザは 分からん

function myBrowserObj(myID){ // 使用中のブラウザの取得
  if (myBR=="N6") myRet=document.getElementById(myID).style;
  else if (myBR=="I4") myRet=document.all[myID].style;
  else if (myBR=="N4") myRet=document[myID];
  else myRet=0;
  return myRet;
}

function myIn(myID,myNo){             // マウスが乗った
  for(var i=myNo;i<myObj.length;i++){ //自分より下の階層をすべて調べる
    if(myObj[i]){                     // コメント表示中？
      myObj[i].visibility = "hidden"; // コメントを非表示
      myObj[i] = null;
    }
  }

  myObj[myNo] = myBrowserObj(myID); // 使用中のブラウザオブジェクト
  if(myObj[myNo]){ // ブラウザ対応？
    myObj[myNo].visibility = "visible"; // １階層目のコメントを表示
  }
}

// --></SCRIPT>
<pre>

<span style="visibility:visible"><a href="" onmouseover="myIn('v0',1)">リンクＡ</a>、<a href="" onmouseover="myIn('v1',1)">リンクＢ</a></span>
<span id="v0"><a href="" onmouseover="myIn('v3',2)">リンクＣ</a>、<a href="" onmouseover="myIn('v4',2)">リンクＤ</a></span><span id="v1"><a href="" onmouseover="myIn('v3',2)">リンクＣ</a>，<a href="" onmouseover="myIn('v4',2)">リンクＤ</a></span>
<span id="v3"><a href="" onmouseover="myIn('v5',3)">リンクＥ</a>、<a href="" onmouseover="myIn('v6',3)">リンクＦ</a></span><span id="v4"><a href="" onmouseover="myIn('v5',3)">リンクＥ</a>，<a href="" onmouseover="myIn('v6',3)">リンクＦ</a></span>
<span id="v5"><a href="" onmouseover="myIn('v7',4)">リンクＧ</a>、リンクＨ</span><span id="v6"><a href="" onmouseover="myIn('v7',4)">リンクＧ</a>，リンクＨ</span>
<span id="v7">リンクＩ</a></span
</pre>
</BODY>
</HTML>