displayスタイル：表に活用
displayスタイルを表に活用し、開閉するメニューらしきものに応用...
[表の枠線を表示]／[表の枠線を非表示]
 |
検索サイト |
| yahoo | |
| infoseek | |
|
超お薦めサイト |
| Kodayan Homepage | |
| 週刊蜃気楼 | |
| とほほのWWW入門 | |
|
メディアサイト |
| 朝日新聞 | |
| NIKKEI NET | |
| CNET Japan |
Sample 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/icon/flg_plus0.gif";//アイコン変更
flg0 = false;
}else{ //下位行が開いていない場合
t0_0.style.display = "block"; //行を表示する
t0_1.style.display = "block";
t0_2.style.display = "block";
thisimg.src = "../../images/icon/flg_minus0.gif";//アイコン変更
flg0 = true;
}
}
･･･（[超お薦めサイト][メディアサイト]も同じなので省略）･･･
function Over(thisimg,n){ //マウスオーバー時のアイコン画像を変更
f = eval("flg" + n);
if(f)thisimg.src="../../images/icon/flg_minus1.gif";
else thisimg.src="../../images/icon/flg_plus1.gif";
}
function Out(thisimg,n){ //マウスアウト時のアイコン画像を変更
f = eval("flg" + n);
if(f)thisimg.src="../../images/icon/flg_minus0.gif";
else thisimg.src="../../images/icon/flg_plus0.gif";
}
-->
</script>
</head>
<body>
<table id="tb" width="50%" border="0" cellpadding="2">
<tr id="t0">
<td width="7%"><img src="../../images/icon/flg_plus0.gif"
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>
･･･（[超お薦めサイト][メディアサイト]も同じなので省略）･･･
</table>