便利eelife Java Script

   戻る

ドラッグして移動します。


　

Color Room

ドラッグすると移動します。
Java Script
サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY >
<DIV style="width : 161px;height : 36px;top : 191px;left : 238px;
position : absolute;
z-index : 3;
visibility : visible;
background-color : aqua;
" id="logo" onmousedown="move_In('logo')">便利eelife<BR>
検索＆厳選リンク集</DIV>


<DIV style="width : 184px;height : 16px;top : 210px;left : 596px;
position : absolute;
z-index : 2;
visibility : visible;
" id="xyps" onmousedown="move_In('xyps')">
<FORM name="myForm"><INPUT size="30" type="text" name="tBox"></FORM>
</DIV>
　


<P><IMG src="rogoclr.gif" name="color" style="position:absolute;
top : 197px;
left : 428px;
width : 146px;
height : 26px;
z-index : 1;
" onmousedown="move_In('color')" width="150" height="20" border="0" alt="Color Room"></P>


<DIV style="width : 71px;height : 48px;top : 178px;left : 70px;
position : absolute;
z-index : 1;
visibility : visible;
" id="ugoku" onmousedown="move_In('ugoku')" align="center">
<TABLE width="150">
<TBODY>
<TR>
<TD align="center" width="150"><FONT size="2">ドラッグすると移動します。</FONT></TD>
</TR>
</TBODY>
</TABLE>
<DIV style="width : 150px;height : 11px;top : 23px;left : 0px;
position : absolute;
z-index : 1;
visibility : visible;
" id="paretto" border="1" width="9" height="36">
<IMG src="rogo_java.gif" width="150" height="20" border="0" alt="Java Script"></DIV>
</DIV>

</BODY>
<!--Ｊａｖａｓｃｒｉｐｔ　<HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--eelife
flag = false;
document.onmousemove = move_Ly; //マウスが移動した時のイベントハンドラ　move_Lyを実行　move_Lyの後 ()は要りません。
document.onmouseup = move_Out; //マウスのボタンを離したとき

function get_Browser(Lyid){ // ブラウザの取得
if (document.getElementById) myObj=document.getElementById(Lyid).style; // N6
else if (document.all) myObj=document.all[Lyid].style; // IE
else if (document.layers) myObj=document[Lyid]; // N4
}

function move_In(n){
flag = true; Lyid = n;
get_Browser(Lyid);
}

function move_Out(){ flag = false;}

function move_Ly(){
if (flag==false) return;
M_x=event.x;　　
M_y=event.y;　　

myObj.left = M_x; //オブジェクトの左からの位置 X座標
myObj.top = M_y; //オブジェクトの上からの位置 Y座標

document.myForm.tBox.value= ' X位置＝'+M_x+':Y位置＝'+M_y;　　　//位置の表示
return false;
}

// -->
</SCRIPT>
コメント
onmousedown : マウスのボタンを押したときのアクション
onmouseup : マウスのボタンを離したときのアクション
event.x : ポインタの水平座標 (x座標 左からの位置) を取得
event.y : ポインタの垂直座標 (y座標 上からの位置) を取得

レイヤーの設置