上のだるまをマウスでドラッグすると、好きなところに動かせます。
ま、やってみてください。
◆
マウスのドラッグを実現するには、３つの動作が必要です。
１つは、マウスのボタンを押したとき、２つ目はマウスを動かしたとき、３つ目はマウスのボタンを離したときです。
と言うわけで、それぞれの動きを”ひとまとまりにしたプログラム（関数）”にしています。
これが、そのＪＡＶＡスクリプトのソースです。
<script language="JavaScript">
<!--
var x,y,ofx,ofy,t=1;
function tukami(){
ofx = event.offsetX;
ofy = event.offsetY;
t=0;
return false;
}
function mov(){
if (t==1){return true;}
x = event.clientX - ofx-2+document.body.scrollLeft;
y = event.clientY - ofy-2+document.body.scrollTop;
document.all.daruma.style.pixelLeft = x;
document.all.daruma.style.pixelTop = y;
return false;
}
function stop() {
t=1;
}
document.onmousemove = mov;
document.onmouseup = stop;
//-->
</script> <!--このＪＡＶＡスクリプトは<head>〜</head>内でも<body>〜</body>内においてもかまいません。-->
<span id=" daruma" style="position:absolute" onMouseDown=" tukami()">
<img src="pic/daruma_nahanaha.gif" width="48" height="64" border="0">
</span>
|
まず、大まかな流れから・・・
画像は
<span></span>で、囲まれています。
そして、ここには
onMouseDown="tukami()"と書かれています。
これは、ＨＴＭＬのタグに記述するＤＨＴＭＬのイベントハンドラです。
<span>〜</span>で囲まれたものにマウスカーソルを重ねて、マウスのボタン
マウスのボタンを押し下げたとき、
tukami()が、実行されます。
ここでは、画像を動かすためのチョットした準備をしています。
そして、ＪＡＶＡスクリプトの最後の方に
document.onmousemove = mov;と書かれています。
マウスが動いたとき、
mov()実行されます。
（
参照、マウスボタンイベント）
ここで、実際にマウスカーソルの動きにあわせて、画像の位置を変えています。
ただし、ｔが１の時は、ここは働きません。
それが、
if (t==1){return true;}です。
returnとすると、ここでこの関数がつまり
mov()が、終わってしまいます。つまり、何もせずに終わります。その場合は画像は動きません。
最初、ページが読み込まれたとき
var x,y,ofx,ofy,t=1;で、ｔは１としています。
でも、画像にマウスカーソルを当てて、マウスのボタンを押すと、
tukami()が働いて、ｔは０になります。そうすると、画像は動きます。
そして、
document.onmouseup = stop;では、マウスのボタンを離したときに、
stop()が働いて、ｔが１になります。すると
mov()が何もしなくなるので画像は、その位置で止まるのです。
◆
では、
tukami()から見ていきましょう。
function tukami(){
ofx = event.offsetX;
ofy = event.offsetY;
t=0;
return false;
}
|
event.offsetXと
event.offsetYというのがあります。
これは、マウスカーソルが画像などの上に重なっているとき、その画像の左上隅の座標を（ｌｅｆｔ＝”０”、ｔｏｐ＝”０”）として。カーソルがどの位置にあるかを示します。
左のように、青い色で丸い絵が描かれている画像があるとします。
でも、書かれた絵がどんな形であろうとも、画像ファイルそのものは必ず長方形の形をしています。
それを黒枠で示してみました。
つまり、黒枠が画像本来の形です。
そして、その画像にマウスカーソルが乗っています。
event.offsetXと
event.offsetYは、その画像の上でのマウスカーソルの位置を数値で示すのです。つまり画像の左上からどの位置にあるかを表します。
それぞれを
ofx、ofyという変数に入れておきます。これは次の関数
mov()で使います。
そして、ｔを０にします。これは、次の
mov()が、働くようにするためです。
◆
そして次は、その
mov()です。
これはマウスカーソルが動いたときに、実行される関数です。
function mov(){
if (t==1){return true;}
x = event.clientX - ofx-2+document.body.scrollLeft;
y = event.clientY - ofy-2+document.body.scrollTop;
document.all.daruma.style.pixelLeft = x;
document.all.daruma.style.pixelTop = y;
return false;
}
|
if (t==1){return true;}は、ｔが１の時は、この行から後に書かれていることをせずに、この
mov()を終わらせます。
関数はｒｅｔｕｒｎで、終わることになっているのです。
ですから、「もしｔが１ならば、この関数は・・つまり
mov()は終わり。」という意味です。
そして、その後に実際に画像を動かすプログラムが書かれています。
x = event.clientX - ofx-2+document.body.scrollLeftには、さっき説明した
ofxが使われています。
これはマウスのボタンを押し下げたときの画像上でのマウスカーソルの位置です。
それから、
event.clientXは、ＨＰを表示している画面の左端から、マウスカーソルがどの位置にあるか？ということを示しています。
（参照）
この行の基本は、ｘに画像の左端の座標を入れたいのです。下の図を見てください。
黄色い部分が画像で、●はマウスカーソルの位置です。
左端の黒い縦線はＨＰの左端です。
この図を、よ〜く見ると、画像の左端の座標の計算方法が理解しやすいと思います。
event.clientXから、
ofxを引くと、ちょうど画像の左端の座標になります。
それで、
x = event.clientX - ofxとなるわけです。
でも、インターネットエクスプローラー６でやってみると、２ピクセルずれてしまうのです。（Ｔ△Ｔ）
どうしてかはわかりませんが、その分を補正するために−２としています。
もし、ＨＰがスクロールしなければ、それで充分なんですが、スクロールした場合のことを考えてその分だけ足しています。
それが、
document.body.scrollLeftです。これはスクロールした量をピクセルで示してくれます。
というわけで、マウスカーソルの位置から画像のｘ座標が計算できます。
そして、同じように画像のＹ座標を計算しているのが、
y = event.clientY - ofy-2+document.body.scrollTopです。
あとは、マウスカーソルの位置から計算したｘとｙに画像を表示すればいいわけです。
それが、
document.all.daruma.style.pixelLeft = xと
document.all.daruma.style.pixelTop = yです。
（参照）
darumaというｉｄをつけたタグ、つまり画像を囲んでいる
<span></span>ですね。
それの位置をｘ、ｙに移動させています。
◆
さて、その次の
stop()ですが、これは押していたマウスのボタンを離したときに実行されます。
そして、ｔを１にします。
ｔが１になると、
mov()が、何もしません。ですからそこで画像は止まります。