web技 |
◆手順1【オブジェクトを表示するエリアの設置】
※オブジェクトを表示するエリアには<div>〜</div>を用います
※<div〜>のstyle属性は、position:absolute;以外は状況に合わせて変更して下さい
[サンプル1:(右上)画像]
※画像をクリックするとスクリプトWin_Resizeto()"を実行します
-----次の行から(copy)-----
<div id="position_Obj" style="position:absolute;">
<a href="javascript://" onclick="Win_Resizeto()">
<img src="photo/windowresize.gif" width="100" height="24" align="middle" border="0"></a>
</div>
-----上の行まで(copy)-----
[サンプル2:(右下)現在の年月日時刻]
※表示位置固定の他、時刻表示のスクリプトも起動しており、ここに時刻を書き込みます
-----次の行から(copy)-----
<div id="position_Obj2"
style="position:absolute;width:200;font-weight:bold;text-align:center;border-color:#ff00ff;border-style:double;border-width:3;">
-----上の行まで(copy)-----
[サンプル3:(左上)説明文をコメント風に]
-----次の行から(copy)-----
<div id="position_Obj3" style="position:absolute;width:400;color:#ff0000;background-color:#8080ff;font-size:10;text-align:center;filter:alpha(opacity=60);">
スクロールしても画像等のオブジェクトの表示位置が固定化されています</div>
-----上の行まで(copy)-----
[サンプル4:(左下)ウィンドウのスクロール量]
※スクリプトで移動量を書き込みます
-----次の行から(copy)-----
<div id="position_Obj4" style="position:absolute;width:200;color:#ff0000;font-size:14;">
-----上の行まで(copy)-----
◆手順2【スクリプトの実行】
※<body〜>に記述します(オープン時起動)
※4つのサンプル表示をすべて実行しています
-----次の行から(copy)-----
<body onload="Obj_PositionXY();Obj_PositionXY2();Obj_PositionXY3();Obj_PositionXY4();">
-----上の行まで(copy)-----
◆手順3【スクリプト】
※全サンプルのスクリプトを掲載しています
[サンプル1:(右上)画像]
※右端(right)・上端(top)からの距離(px)で位置を決めています
※setTimeoutを使用し一定時間間隔(1秒=1000)でスクリプトを再実行しています(他のスクリプトも同じ)
-----次の行から(copy)-----
function Obj_PositionXY() {
X_int=50; //ウィンドウ右端からの画像の最初の位置(px)
Y_int=10; //ウィンドウ上端からの画像の最初の位置(px)
document.all["position_Obj"].style.right=X_int+document.body.scrollLeft;
document.all["position_Obj"].style.top=Y_int+document.body.scrollTop;
setTimeout("Obj_PositionXY()",500);
}
-----上の行まで(copy)-----
[サンプル2:(右下)現在の年月日時刻]
※右端(right)・下端(bottom)からの距離(px)で位置を決めています
※bottomの場合はスクロール量の補正は行いません
※現在時刻はinnerTextを用いて書き込んでいます
-----次の行から(copy)-----
function Obj_PositionXY2() {
X_int2=20; //ウィンドウ右端からの画像の最初の位置(px)
Y_int2=10; //ウィンドウ下端からの画像の最初の位置(px)
now=new Date();
document.all["position_Obj2"].style.right=X_int2+document.body.scrollLeft;
document.all["position_Obj2"].style.bottom=Y_int2;
document.all["position_Obj2"].innerText=
now.getYear() + "." + now.getMonth() + "." + now.getDate() +
" " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
setTimeout("Obj_PositionXY2()",500);
}
-----上の行まで(copy)-----
[サンプル3:(左上)説明文をコメント風に]
※左端(left)・上端(top)からの距離(px)で位置を決めています
-----次の行から(copy)-----
function Obj_PositionXY3() {
X_int3=20; //ウィンドウ左端からの画像の最初の位置(px)
Y_int3=70; //ウィンドウ上端からの画像の最初の位置(px)
document.all["position_Obj3"].style.left=X_int3+document.body.scrollLeft;
document.all["position_Obj3"].style.top=Y_int3+document.body.scrollTop;
setTimeout("Obj_PositionXY3()",500);
}
-----上の行まで(copy)-----
[サンプル4:(左下)ウィンドウのスクロール量]
※左端(left)・下端(bottom)からの距離(px)で位置を決めています
※bottomの場合はスクロール量の補正は行いません
-----次の行から(copy)-----
function Obj_PositionXY4() {
X_int4=5; //ウィンドウ左端からの画像の最初の位置(px)
Y_int4=5; //ウィンドウ下端からの画像の最初の位置(px)
document.all["position_Obj4"].style.left=X_int4+document.body.scrollLeft;
document.all["position_Obj4"].style.bottom=Y_int4;
document.all["position_Obj4"].innerText=
"スクロール量(px) X=" + document.body.scrollLeft+" , Y=" + document.body.scrollTop;
setTimeout("Obj_PositionXY4()",500);
}
-----上の行まで(copy)-----
|