便利eelife Java Script

   戻る


テーブルの重なりを替えます。
テーブル@ テーブルA テーブルB テーブルC テーブルD



サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY >
<TABLE border="1">
<TBODY>
<TR>
<TD id="TBL1" onclick="idname('TBL1')" onmouseout="this.style.zIndex = 1">テーブル@</TD>
<TD id="TBL2" onclick="idname('TBL2')" onmouseout="this.style.zIndex = 2">テーブルA</TD>
<TD id="TBL3" onclick="idname('TBL3')" onmouseout="this.style.zIndex = 3">テーブルB</TD>
<TD id="TBL4" onclick="idname('TBL4')" onmouseout="this.style.zIndex = 4">テーブルC</TD>
<TD id="TBL5">テーブルD</TD>
</TR>
</TBODY>
</TABLE>

</BODY>
<!--Javascript <HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--eelife
z = 6;
function idname(n){Lyid=n;
document.all[Lyid].style.zIndex =z;
}
// -->
</SCRIPT>
コメント
z-index : 重なり方 数値が大きい程、手前(上)にきます。

下記のスタイルシートを</HEAD>の上に挿入してください。
<STYLE type="text/css">
<!--
#TBL1{
width : 100px;
height : 100px;
top : 180px;
left : 380px;
position : absolute;
z-index : 1;
color : aqua;
background-color : red;
}
#TBL2{
width : 100px;
height : 100px;
top : 200px;
left : 400px;
position : absolute;
z-index : 2;
color : navy;
background-color : lime;
}
#TBL3{
width : 100px;
height : 100px;
top : 220px;
left : 420px;
position : absolute;
z-index : 3;
color : gray;
background-color : yellow;
}
#TBL4{
width : 100px;
height : 100px;
top : 240px;
left : 440px;
position : absolute;
z-index : 4;
color : yellow;
background-color : blue;
}
#TBL5{
width : 100px;
height : 100px;
top : 260px;
left : 460px;
position : absolute;
z-index : 5;
color : green;
background-color : fuchsia;
}
-->
</STYLE>