画像をドラッグして任意の位置に変更する(動かす)
Copyright(C) 2004 web工房 All Rights Reserved
action
ここをクリックするとリロードして初期状態に戻します
web技
◆手順1【画像設置】
※大きい画像は、｢画像とテキスト｣が組みになっていますので<div>〜</div>を用い、画像とテキストを配置しています。
※小さい画像は、画像のみですので、直接<img src=""〜>に必要な属性を記述しています。
※大きい画像は<div〜>に、小さい画像は<img〜>にそれぞれ id属性を設定します
-----大きい画像/次の行から(copy)-----
<div id="DIV_S1" align="center"
style="position:absolute; top:170; left:220; width:200; z-index:1"
onMousedown="DragOn('DIV_S1');">わが愛娘
<img src="photo/001_s.JPG" width="200" height="175" border="1">
</div>
-----大きい画像/上の行まで(copy)-----
-----小さい画像/次の行から(copy)-----
<img src="photo/001_s2.JPG" id="DIV_S2" width="100" height="88" border="1"
style="position:absolute; top:170; left:160; width:100; z-index:1"
onMousedown="DragOn('DIV_S2');">
-----小さい画像/上の行まで(copy)-----
※上記はでは title属性・alt属性は省略してあります
※それぞれ style属性の設定では
(1)position:absolute; として、最初の設置位置top/left(ピクセル)を指定します
(2)複数画像の重なりを順序だてるためにz-indexを指定します(数値が大きい方が上に表示されます)
(3)onMousedown="DragOn('移動するオブジェクトのid名');">でスクリプトを実行します
◆手順2【javascript】
※<head>〜</head>に記述します
※複数の画像でも同じスクリプトが使用できます
-----次の行から(copy)-----
<script type="text/javascript">
<!--
Comment_Flag=0;
window.document.onmousemove=DragObj;
window.document.onmouseup=DragOff;
function DragOn(n) {
Comment_Flag=1;
Obj_ID=n;
Y=event.y-document.all[Obj_ID].style.pixelTop;
X=event.x-document.all[Obj_ID].style.pixelLeft;
}
function DragOff() {
Comment_Flag=0;
}
function DragObj() {
if (Comment_Flag==1) {
document.all[Obj_ID].style.pixelTop=event.y - Y;
document.all[Obj_ID].style.pixelLeft=event.x - X;
return false;
}
else {
return;
}
}
//-->
</script>
-----上の行まで(copy)-----
解説等
※外部スクリプトにして、各ファイルで共通に使うのが有効です。
※<div>〜</div>内にはテキストフィールドやボタン等のフォームを配置することもできます。
【類似技】(style/position/z-index等)
◆[技g006]画像の上に文字や画像を重ねる
◇onMousedown◇style◇position◇event.x◇pixelTop
注意
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----
