便利eelife Java Script

   戻る

テーブルを移動します。
top : left




：テーブル①
：テーブル②
テーブル①
テーブル②


サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY >
<FORM> top:left<BR>
<INPUT type="button" value="100,700" onclick="act(100,700)"><BR>
<INPUT type="button" value="400,500" onclick="act(400,500)"><BR>
<INPUT type="button" value="210,550" onclick="act(210,550)"><BR>
<BR>
<INPUT type="radio" checked name="rajio" onclick="idname('TBL1')">：テーブル①<BR>
<INPUT type="radio" name="rajio" onclick="idname('TBL2')">：テーブル②</FORM>
<TABLE border="1">
<TBODY>
<TR>
<TD id="TBL1">テーブル①</TD>
</TR>
<TR>
<TD id="TBL2">テーブル②<BR>
</TD>
</TR>
</TBODY>
</TABLE>

</BODY>
<!--Ｊａｖａｓｃｒｉｐｔ　<HEAD>と</HEAD>の間に挿入してください。 -->

<SCRIPT language="JavaScript">
<!--eelife
Lyid="TBL1";
function idname(n){Lyid=n}

function act(C_Top,C_Left){
document.all[Lyid].style.top= C_Top;
document.all[Lyid].style.left = C_Left;
}

// -->
</SCRIPT>
コメント
レイヤー
プッシュボタン
ラジオボタン

下記のスタイルシートを</HEAD>の上に挿入してください。
<STYLE type="text/css">
<!--
#TBL1{
width : 100px;
height : 100px;
top : 210px;
left : 550px;
position : absolute;
z-index : 2;
color : green;
background-color : yellow;
}

#TBL2{
width : 100px;
height : 100px;
top : 210px;
left : 550px;
position : absolute;
z-index : 1;
color : green;
background-color : #c4ffc4;
}

-->
</STYLE>