便利eelife Java Script

   戻る


テーブルを移動します。
テーブル① テーブル② テーブル③
↑
← →
↓


サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY >
<TABLE bordercolor="red" id="xypos" style="width : 300px;height : 100px;position : absolute;top : 100px;left : 100px;
z-index : -2;
" border="1">
<TBODY>
<TR>
<TD width="100" bgcolor="#cc00cc">テーブル①</TD>
<TD width="100" bgcolor="#ffff00">テーブル②</TD>
<TD width="100" bgcolor="#00ff00">テーブル③</TD>
</TR>
</TBODY>
</TABLE>
<TABLE cellspacing="0" style="font-weight : bold;color : blue;">
<TBODY>
<TR>
<TD></TD>
<TD title="上へ" onclick="move('up')"><SPAN style="cursor : pointer;">↑</SPAN></TD>
<TD></TD>
</TR>
<TR>
<TD title="左へ" onclick="move('left')"><SPAN style="cursor : pointer;">←</SPAN></TD>
<TD></TD>
<TD title="右へ" onclick="move('right')"><SPAN style="cursor : pointer;">→</SPAN></TD>
</TR>
<TR>
<TD></TD>
<TD title="下へ" onclick="move('down')"><SPAN style="cursor : pointer;">↓</SPAN></TD>
<TD></TD>
</TR>
</TBODY>
</TABLE>

</BODY>
<!--Ｊａｖａｓｃｒｉｐｔ　<HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--eelife
M_x=100;
M_y=100;
i=100;

function move(flag){
myObj = document.getElementById('xypos').style;
if(flag=='up'){M_y=M_y-i;myObj.top = M_y;}
if(flag=='down'){M_y=M_y+i;myObj.top = M_y;}
if(flag=='right'){M_x=M_x+i;myObj.left = M_x;}
if(flag=='left'){M_x=M_x-i;myObj.left = M_x;}
}

// -->
</SCRIPT>
コメント
テーブルにID名 id="xypos" を付けて document.getElementById('xypos').style でテーブルの位置を制御します。

レイヤー