- ベストアンサー
あるgif画像(A.gifとします)をキーボードの矢印キーの入力によっ
あるgif画像(A.gifとします)をキーボードの矢印キーの入力によって動かし、 A.gifが、配置してある別の画像(1~4.gif)と触れたときに、リンクへジャンプする、 といった仕掛けのWebサイトを、JavaScriptを利用して作りたいと思っています。 今のところ、A.gifが移動し、ある1点の座標(x,y)に重なったとき、リンクへジャンプするというプログラムはできたのですが、 ある一定の範囲にA.gifが触れたときにリンクへジャンプするという命令の方法がよくわからず、困っています。 つまり、範囲を点ではなく、四角にする方法が知りたいのです。 どなたかご教授願います。
- kikuyaso
- お礼率100% (10/10)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
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>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
両方とも四角形として… それぞれをR1、R2、幅・高さをw1、h1などとするなら。 R1,R2の中心間の距離が、 幅方向 W <= (w1+w2)/2 高さ方向 H <= (h1+h2)/2 で重なっている。(「=」は接している時)
お礼
お礼が遅れてしまってすみません… ありがとうございました。
関連するQ&A
- gif 画像上の ボタンに リンクを張るには?
HP 上の gif画像ファイル にいくつか小さなボタンを配置して それぞれの ボタンに リンクを張りたく思います。 gif 画像上の ボタンに リンクを張るには?どのようにすればいいのでしょうか?
- ベストアンサー
- HTML
- GIFの画像もしくはbmpの画像を編集したい
同じ画像で、GIFとbmpがあるので、どちらでもいいのですが、 別の人が書いた画像があります。 その人はすでに辞めてしまっているので他に元データがあるのかもしれませんが見つからない状況です。 今質問したいことは、その画像の編集方法です。 左隅に描かれていて、背景は白でちっちゃな四角のなかにあります。 四角の大きさを大きくすることはできました。 が、わからないことがあります。 絵が描かれているのですが、その背景を透明にすることはできないのでしょうか。 なぜかというと、HPに挿入したいのですが、そのままだと 白い四角のなかに絵がある状況になってしまって。 また、四角じゃなく丸くする方法もあれば教えていただきたいです。 ペイントに関しては全然さわったことがないので、おすすめサイトなんかもあれば教えてください。 よろしくお願いします。
- ベストアンサー
- 画像・動画・音楽編集
- GIF画像の表示について
本当に基本的なことと思います。 HP上でGIF画像にリンクされている項目をリンクした後 小さめの画像が開き、画像上にマウスポインタを置くと 右下に「画像を100%サイズにするためのようのなアイコン」が現れます。使い方によっては、とっても重宝する のですが、今のところ邪魔です。これを出さない方法が あるのでしょうか。
- ベストアンサー
- その他(インターネット・Webサービス)
- GIF画像について
ネットである特定のHPのリンク先をクリックして飛ぼうとすると、真っ白で何も表示されないことが良くあります。そして、その時には必ず(GIF画像、1×1 px)という表示がタスクバーの名前で表示されます。 これはどういう現象が起こっているのでしょうか?また、その解決方法はどうすればいいのでしょうか?
- ベストアンサー
- その他(インターネット・Webサービス)
- JPGにオンマウス動作で透過GIF画像や透過PNG画像を重ねたいのです
JPGにオンマウス動作で透過GIF画像や透過PNG画像を重ねたいのです JPG にオンマウス動作で透過GIF画像や透過PNG画像を重ねたいのですが、良い方法はありませんでしょうか? 例えば、分かれ道を撮したJPG画像に、マウスのカーソルを合わせる(載せる)と、JPG画像の上に、矢印だけが描かれた透過GIF画像、もしくは透過 PNG画像が表示されるようにしたいのです。 現在はJPG画像に矢印を書き加えたものを、onmouseoverで差し替え表示をする方法を行っていますが、書き加えられた矢印などの画像はJPG圧縮や縦横サイズの関係でノイズが載ってしまい、イマイチきれいじゃありません。 マウスの動作で透過GIF画像や透過PNG画像を重ねたり、外したりできる良い方法があればお教えください。
- 締切済み
- HTML
- gif画像が表示されない。
他の方のHPよりリンクの為、バナーを右クリックで反転させ 自分のPCに画像を保存したところ、保存したバナーを開くと四角に赤いバッテンになってしまいます。いずれもgifのバナーで自分のHPに貼り付けると自分のPCでは見れますが、他のPCでは同じように赤バッテンになっています。原因を色々調べ、「●画像のアドレス(URL)が正しくない。下記のように"自分のPCの中における住所"を指定してしまっている方が稀にいらっしゃいます。 例:<img src="file:///C:/***/***.gif> ↑これだと、その画像は自分にしか見えません。 ※「URL」とは「http://」で始まるインターネット上での住所のことです。」かと思いましたが、どのようにfile:///から「http://」にするのか初心者のためわかりません。 どうすればよいかお教え願います。
- ベストアンサー
- ホームページ作成ソフト
- オンマウスで矢印の横に画像を表示させたい・・・・。
初めまして。さっそくですが、質問させて頂きます。 リンクを貼っている文字にマウス(矢印)を乗せた時に、矢印の横に説明を出す方法はわかるのですが、その位置に画像を表示させたいのです。 どうしたら良いでしょうか・・・・。 お願いします。
- ベストアンサー
- JavaScript
- HTML 矢印(画像)の向きについて
よくHPの下にある 『 ← 前のページ 次のページ → 』 を表示させたいのですが、どのようにすればよいのかわかりません。 (矢印は画像) 現在の私のHTMLは <div id="go"><a href="../**/**.html">前のページ(全角スペース)</a> <a href="../**/**.html">次のページ</a> </div> CSSは #go a{ padding-left: 30px; background: url(../img/*.gif) no-repeat left; } となっているので『 → 前のページ → 次のページ 』 と表示されてしまいます。 矢印が同じ向きに表示されるのはわかるんですが、divタグを別にしてCSSで矢印の向きを それぞれ指定しようとすると 『 ← 前のページ 次のページ → 』 となり改行されてしまいます。 同じ行に矢印の向きを別にして表示させるにはどのようにしたらよいのでしょうか? 誰か教えていただけると助かります。宜しくお願いします。
- ベストアンサー
- その他(インターネット・Webサービス)
- gif画像でたまに背景がグレーになってしまいます。
はじめまして。 現在、ホームページの画像を作成しています。 photoshopで作成しているのですが、「web用に保存」でgifでしたところ、背景に色がついてしまうときがあります。 ちなみに、背景に色がついてしまうときはかなり小さい範囲の背景を残した時です。 たとえば、四角の枠に画面いっぱいの角丸長方形を作成したときの角の部分などです・・・ これはphotoshop側の問題なのでしょうか? それともWEB表示上の問題なのでしょうか? また、1px単位の境界線を引いた時もカーブがかかっているとかなりギザギザに表示されるときとされないときがあります。 同じレイヤースタイルのものを文字だけ変えて画像にしたときなどにも起こるのですが、これも原因不明で困っています。 どなたか原因と解決方法に心当たりのあるかたはどうかよろしくお願致します。
- 締切済み
- HTML
お礼
お礼が遅れてすみませんでした… わかりやすいサンプルをありがとうございました!