displayスタイル：表に活用

displayスタイルを表に活用し、開閉するメニューらしきものに応用...
　　[表の枠線を表示]／[表の枠線を非表示]

検索サイト
　 google
　 yahoo
　 infoseek
超お薦めサイト
　 Kodayan Homepage
　 週刊蜃気楼
　 とほほのWWW入門
メディアサイト
　 朝日新聞
　 NIKKEI NET
　 CNET Japan

HTML Source......................................................................>>>

<STYLE TYPE="text/css">
<!--
	.tr1 {display:none}
	.td1 {color:red;font:12px;padding-left:30}
	img  {cursor:hand}
	span {cursor:hand;color:blue}
-->
</STYLE>
<script language="JavaScript">
<!--
flg0 = false;   //[検索ｻｲﾄ]の下位行が開いている(true)か、いないか(false)を識別
flg1 = false;
flg2 = false;
function OpenClose0(thisimg){   //[検索ｻｲﾄ]の開閉
  if(flg0){    //既に展開している場合
    t0_0.style.display = "none";  //行を非表示(閉じる)にする
    t0_1.style.display = "none";
    t0_2.style.display = "none";
    thisimg.src = "../../images/ico/flg_plus0.gif";//先頭のｱｲｺﾝを変える
    flg0 = false;    //ﾌﾗｸﾞ変数を"閉じている"に
  }else{
    t0_0.style.display = "block";
    t0_1.style.display = "block";
    t0_2.style.display = "block";
    thisimg.src = "../../images/ico/flg_minus0.gif";
    flg0 = true;
  }
}
function OpenClose1(thisimg){   //[超お薦めｻｲﾄ]の開閉
  if(flg1){
    t1_0.style.display = "none";
    t1_1.style.display = "none";
    t1_2.style.display = "none";
    thisimg.src = "../../images/ico/flg_plus0.gif";
    flg1 = false;
  }else{
    t1_0.style.display = "block";
    t1_1.style.display = "block";
    t1_2.style.display = "block";
    thisimg.src = "../../images/ico/flg_minus0.gif";
    flg1 = true;
  }
}
function OpenClose2(thisimg){   //[ﾒﾃﾞｨｱｻｲﾄ]の開閉
  if(flg2){
    t2_0.style.display = "none";
    t2_1.style.display = "none";
    t2_2.style.display = "none";
    thisimg.src = "../../images/ico/flg_plus0.gif";
    flg2 = false;
  }else{
    t2_0.style.display = "block";
    t2_1.style.display = "block";
    t2_2.style.display = "block";
    thisimg.src = "../../images/ico/flg_minus0.gif";
    flg2 = true;
  }
}
//以下の関数は、ｱｲｺﾝ上にﾏｳｽｵ-ﾊﾞｰした場合、赤くするだけ
function Over(thisimg,n){   //ｱｲｺﾝ上にﾏｳｽが乗った場合
  f = eval("flg" + n);    //ﾌﾗｸﾞ変数を作成
  if(f)thisimg.src="../../images/ico/flg_minus1.gif";  //"展開している"場合
  else thisimg.src="../../images/ico/flg_plus1.gif";
}
function Out(thisimg,n){    //ｱｲｺﾝ上からﾏｳｽが離れた場合
  f = eval("flg" + n);
  if(f)thisimg.src="../../images/ico/flg_minus0.gif";
  else thisimg.src="../../images/ico/flg_plus0.gif";
}
-->
</script>
</head>
<body>
<table id="tb" width="50%" border="0" cellpadding="2">
  <tr id="t0"> 
    <td width="7%"><img src="../../images/ico/flg_plus0.gif" width="20" height="13" 
　　　onClick="OpenClose0(this)" onMouseover="Over(this,0)" onMouseout="Out(this,0)"></td>
    <td width="93%">検索サイト</td></tr>
  <tr id="t0_0" class="tr1"> 
    <td width="7%">　</td>
    <td width="93%" class="td1">google</td></tr>
  <tr id="t0_1" class="tr1"> 
    <td width="7%">　</td>
    <td width="93%" class="td1">yahoo</td></tr>
  <tr id="t0_2" class="tr1"> 
    <td width="7%">　</td>
    <td width="93%" class="td1">infoseek</td></tr>
  <tr id="t1"> 
    <td width="7%" id="t1"><img src="../../images/ico/flg_plus0.gif" width="20" height="13" 
　　　onClick="OpenClose1(this)" onMouseover="Over(this,1)" onMouseout="Out(this,1)"></td>
    <td width="93%">超お薦めサイト</td></tr>
  <tr id="t1_0" class="tr1"> 
    <td width="7%">　</td>
    <td width="93%" class="td1">Kodayan Homepage</td></tr>
  <tr id="t1_1" class="tr1"> 
    <td width="7%">　</td>
    <td width="93%" class="td1">週刊蜃気楼</td></tr>
  <tr id="t1_2" class="tr1"> 
    <td width="7%">　</td>
    <td width="93%" class="td1">とほほのWWW入門</td></tr>
  <tr id="t2"> 
    <td width="7%" id="t2"><img src="../../images/ico/flg_plus0.gif" width="20" height="13" 
　　　onclick="OpenClose2(this)" onMouseover="Over(this,2)" onMouseout="Out(this,2)"></td>
    <td width="93%">メディアサイト</td></tr>
  <tr id="t2_0" class="tr1"> 
    <td width="7%">　</td>
    <td width="93%" class="td1">朝日新聞</td></tr>
  <tr id="t2_1" class="tr1"> 
    <td width="7%">　</td>
    <td width="93%" class="td1">NIKKEI NET</td></tr>
  <tr id="t2_2" class="tr1"> 
    <td width="7%">　</td>
    <td width="93%" class="td1">CNET Japan</td></tr>
</table>

end(01/11/03)