あるgif画像（A.gifとします）をキーボードの矢印キーの入力によっ

質問

あるgif画像（A.gifとします）をキーボードの矢印キーの入力によって動かし、
A.gifが、配置してある別の画像（1～4.gif）と触れたときに、リンクへジャンプする、
といった仕掛けのWebサイトを、JavaScriptを利用して作りたいと思っています。

今のところ、A.gifが移動し、ある1点の座標（x,y）に重なったとき、リンクへジャンプするというプログラムはできたのですが、
ある一定の範囲にA.gifが触れたときにリンクへジャンプするという命令の方法がよくわからず、困っています。
つまり、範囲を点ではなく、四角にする方法が知りたいのです。
どなたかご教授願います。

回答No.2

dadbad · ベストアンサー

x, yは表示領域左上端からの最短距離が前提ですが
要素領域はxに要素の幅、yに高さを加算すれば割り出せます。

質問の肝である「一定の範囲」の算出ですが
位置移動する要素幅/高を取得し、そこから割り出せばよろしいかと。

簡単なサンプルを書いてみたので参考に。

<div id="move" style="position: absolute; width: 50px; height: 50px; background-color:yellow;">[move]</div>
<div id="area"style="position: absolute; left: 150px; top: 150px; width: 150px; height: 100px; background-color:yellow;">[area]</div>
<script type="text/javascript">
var moveObj = document.getElementById("move");
var areaObj = document.getElementById("area");

//領域取得オブジェクトを返す
function getRange(obj1, obj2) {
var obj1Width = obj1.offsetWidth; //位置移動要素幅を取得
var obj1Height = obj1.offsetHeight; //位置移動要素高を取得
var obj2Width = obj2.offsetWidth; //領域取得要素幅を取得
var obj2Height = obj2.offsetHeight; //領域取得要素高を取得
var obj2Left = obj2.offsetLeft; //領域取得要素左端距離を取得
var obj2Top = obj2.offsetTop; //領域取得要素上端距離を取得
return {
rangeX: { short: obj2Left - obj1Width, long: obj2Left + obj2Width },
rangeY: { short: obj2Top - obj1Height, long: obj2Top + obj2Height }
};
}

//領域取得オブジェクト生成
var Area = getRange(moveObj, areaObj);

function hoge(e) {
var doc = document.documentElement;
var body = document.body;
var X = !window.event ? e.pageX : event.x + doc.scrollLeft || body.scrollLeft;
var Y = !window.event ? e.pageY : event.y + doc.scrollTop || body.scrollTop;
moveObj.style.left = X + "px";
moveObj.style.top = Y + "px";

//接触判定
if (X >= Area.rangeX.short && X <= Area.rangeX.long
&& Y >= Area.rangeY.short && Y <= Area.rangeY.long) {
alert("!!");
}
}

document.onmousemove = hoge;
</script>

お礼

お礼が遅れてすみませんでした…
わかりやすいサンプルをありがとうございました！

回答No.1

fujillin

両方とも四角形として…
それぞれをR1、R2、幅・高さをｗ1、ｈ1などとするなら。

R1,R2の中心間の距離が、
　幅方向　　W <= (w1+w2)/2
　高さ方向　H <= (h1+h2)/2
で重なっている。（「=」は接している時）

お礼

お礼が遅れてしまってすみません…
ありがとうございました。