便利eelife Java Script

   戻る

レイヤー（レイアウト枠）の作成と移動。

レイヤー（レイアウト枠）


サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY >

<DIV style="width : 200px;
height : 100px;
top : 300px;
left : 400px;
position : absolute;
z-index : 1;
visibility : visible;
background-color : teal;
background-image : url(../../bgpink.jpg);
" id="Layer1"><BR>
レイヤー（レイアウト枠）</DIV>

</BODY>
<!--Ｊａｖａｓｃｒｉｐｔ　<HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--eelife
document.onmousemove = Mouse_xypos; // マウスを動かしたとき Mouse_xypos を実行
function Mouse_xypos(){  //  ポインタの位置の取得
M_x = event.x;
M_y = event.y;
Dsp_Ly();
}

function Dsp_Ly(){  // マウスの位置にレイヤーを移動
document.all("Layer1").style.left= M_x;
document.all("Layer1").style.top = M_y;
}

// -->
</SCRIPT>
コメント
レイヤーのサイズ(px)
width : レイヤーの幅
height : レイヤーの高さ

レイヤーの位置(px)
top : ページの上からレイヤーの上端までの距離(垂直 y座標)。
left : ページの左からレイヤーの左端までの距離(水平 x座標)。

表示位置の指定の仕方
position : absolute（絶対座標です）

レイヤーの重なり方
z-index : 数値が大きい程、手前（上）にきます。

レイヤーの見え方
visibility : visible で可視、hidden で不可視、になります。

背景色
background-color : 色の名前又はコードで指定

背景画像
background-image : 背景画像の URL を指定

レイヤーの ID
id : ID 名を指定します。重複しないようにします。

event.x : ポインタの左からの位置(水平 x座標)。

event.y : ポインタの上からの位置(垂直 x座標)。

document.all("Layer1").style.left= M_x;
document.all("Layer1").style.top = M_y;
ポインタの現在の位置を　ＩＤ名が"Layer1"のレイヤーの水平、垂直座標にいれて
移動します。
変数 M_x、M_y を制御することによってレイヤーをさまざまに動かすことが可能になります。