出産前後の痔にはご注意!

画像をクリックしてそのクリック地点の座標を変数x、yに代入したいのですがどのように書けばいいのでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (2件)

<IMG>タグには、onClickイベントハンドラを追加しておくとして…


座標計算の考え方としては、
(画像に対するマウスの相対座標)=(マウスの絶対座標)-(画像の左上絶対座標)
で決まります。


以下、IE限定で書きます。

マウスの座標はグローバルオブジェクト"event"のプロパティから取得できます。
------------------------------------------------------------
var mouseX= event.clientX;
var mouseY= event.clientY;
------------------------------------------------------------

タグ(Elementオブジェクト)の座標も、エレメントのプロパティから取得できます。
------------------------------------------------------------
<img id="example_img" src="sample.png">
------------------------------------------------------------
このようなタグであれば…

------------------------------------------------------------
var imgX= document.getElementById("example_img").offsetLeft;
var imgY= document.getElementById("example_img").offsetTop;
------------------------------------------------------------
で取得できます。


なお、Firefoxの場合は、EventListenerを使ってマウス座標を取得するようです。
以下の参考サイト以外にも大量に検索に掛かりましたので自分に合うものを探してください。

参考URL:IE以外のブラウザへの対応で参考にしました

参考URL:http://www.kawaz.jp/pukiwiki/index.php?JavaScrip …
    • good
    • 0
この回答へのお礼

ご丁寧に本当に有難うございました。

お礼日時:2007/02/14 17:30

JavaScriptだとこんな感じでしょうか?


テーブルの背景に画像を置くとか??

これはエリアマップで書くことも出来ます。
<img src="画像ファイル" width="380" height="345" border="0" usemap="#Map">

<map name="Map">
<area shape="rect" coords="110,137,120,142" onClick="pus();">
</map>
など
ただし1pxづつやるとエリアが莫大になります。
それかマウス位置を判定すると出来ますが、画像の配置位置によってはブラウザでずれます。
    • good
    • 0
この回答へのお礼

ご丁寧に本当に有難うございました。

お礼日時:2007/02/14 17:30

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q画像の座標位置取得

javascriptの勉強を始めたばかりで、どうしてもわからないことがあるので質問させてください。(まだ初めて一週間程度の初心者です…)

マウスの座標を取得するのはなんとなくわかったのですが、画像の座標をどうやって取得すればいいのかがわかりません。(マウスはevent.offsetで取得してるのでそれに合わせたい)

例えば…
function lyrGetTop(lyr){
return( parseInt( document.getElementById(lyr).style.pixelTop ) );
}
で、画面全体の位置からの座標を取得するのはできたのですが、ブロック内(?)の位置から取得することができません…。
どのようにすればevent.offsetでのマウスの座標ようにブロックを基準とした座標を取得することができますか?



それから、シューティングゲームの自機が弾を連射するようなアルゴリズムがわかりません。

<html>
<head>
<title></title>

<script language="JavaScript"><!--

y = 450;
interval = 20;

function moveBall(){
y = y - interval;

document.getElementById("ball").style.pixelLeft = getlyrleft("ber") + 24;
document.getElementById("ball").style.pixelTop = y;
document.getElementById("ball").style.visibility = "visible";
if( (y < 10) ){
document.getElementById("ball").style.visibility = "hidden";
document.getElementById("ball").style.pixelTop = getlyrtop("ber");
return 0;
}
}

function getlyrtop(lyr){
return(parseInt(document.getElementById(lyr).style.pixelTop));
}

function getlyrleft(lyr){
return(parseInt(document.getElementById(lyr).style.pixelLeft));
}


// --></script>

</head>

<body onclick="setInterval('moveBall()',1)">
<img src="bb01.gif" id="ball" style="position:absolute; visibility:hidden" left:0px;top:16px;">
<img src="bb03.gif" id="ber" style="position:absolute; left:445px; top:459px;"/>
</body>
</html>


これだと、連射どころか、二回目のクリックに反応すらしないんです…。

どうかご教授お願いします。

javascriptの勉強を始めたばかりで、どうしてもわからないことがあるので質問させてください。(まだ初めて一週間程度の初心者です…)

マウスの座標を取得するのはなんとなくわかったのですが、画像の座標をどうやって取得すればいいのかがわかりません。(マウスはevent.offsetで取得してるのでそれに合わせたい)

例えば…
function lyrGetTop(lyr){
return( parseInt( document.getElementById(lyr).style.pixelTop ) );
}
で、画面全体の位置からの座標を取得するのはできたのですが、ブロック内...続きを読む

Aベストアンサー

かいせつかぁ~。
へんなかきかただものね~。

>var FEND = true;
この変数は、ゲームのループを終了させるために使っている。
たとえば
if (FEND == true) { setTimeout(LOOP,10) }
と書けばよいのだけど
if (FEND) setTimeout(LOOP,10);
これも同じ。さらに
FEND && setTimeout( LOOP, 10);
これも同じ。



>var Pmouse = {x:240, y:600};
は、マウスの座標の初期値として利用している
例えば、
Pmouse = [240,600];
とすると、600の値を取得するのに
Pmouse[1]としなければならない。これだと可読性が悪い!
(ってこんなコードを書いてるのに可読性とはおかしいね)
Pmouse.y とすると 600が取得できる



>document.getElementById('waku').onmousemove = function (evt) {
>evt = evt ? evt: window.event;
これは、このマウスオーバーしたときのイベントを取得するため
残念ながら、IEではevtにイベントが代入されない。なので
evt が何も無かったら window.event を代入している。
三項演算子っていったかな?
evt = evt ? evt: window.event;
を普通に書くと
if (evt == undefined) evt = window.event; else evt = evt;


FEND = teki.y < 600;
は、teki.y < 600 を評価して、条件が満たされれば、trueがFENDに代入される
つまり敵のY座標が600より小さければ、ゲームを継続する。
これも普通に書けば、
if (teki<600) { FEND = true; }
と同じ。



>FEND && setTimeout(LOOP1, 20); //これはclearTimeoutはする必要はないのでしょうか?
setTimeoutは一度しか使われないので、実行されればそれで終わり。



>jiki.x += (Pmouse.x < jiki.x -8 ) * -4 + (Pmouse.x > jiki.x +8) *4;
これを普通に書けば、
if (Pmouse.x < (jiki.x - 8)) jiki.x = jiki.x -4;
if (Pmouse.x > (jiki.x + 8)) jiki.x = jiki.x +4;
となる。
例えば
a = (何かの条件式) * 4;
の場合、条件が成立すると、trueなんだけど、掛け算するときは、数値の1と解釈できる!と
覚えておけばいいのかも?
ちなみに±8は、マウスのマージンね。止めたいときに、判定を甘くしてる。


>FEND && setTimeout(LOOP2, 60);
>第二引数の数字が敵か自機かなどによって数字が違うのもどうしてでしょうか?
ゲームを作るうえで、キャラクターの動き、つまりバランスは非常に大事。
第二引数で、キャラクターの速度の調節が簡単にできる。
早く動かそうとして、4ドットを8ドットづつにするのは、好きじゃない。



>cloneNode(false);
今回は、画像の'TAMA'に利用しているけど、これは画面上に何個出現するかわからない
玉にたいして、画像をたくさん用意するより、1つ隠しておいて、それをコピーして
使っている。appendChildは、コピーしたものを出現させる!という意味かな?
appendChildすると
HTML上は
<div id="waku">
<img src="jiki.png" width="20" height="20" alt="自機" id="JIKI">
<img src="teki.png" width="20" height="20" alt="敵機" id="TEKI">
<img src="tama0.png" width="20" height="20" alt="玉" id="TAMA">
<img src="tama0.png" width="20" height="20" alt="玉">
<img src="tama0.png" width="20" height="20" alt="玉">
<img src="tama0.png" width="20" height="20" alt="玉">
<img src="tama0.png" width="20" height="20" alt="玉">
<img src="tama0.png" width="20" height="20" alt="玉">
<img src="tama0.png" width="20" height="20" alt="玉">
<img src="tama0.png" width="20" height="20" alt="玉">
</div>
なふうになっていると思う。


>if (y>4) setTimeout(LOOP3, 20); else {
>document.getElementById('waku').removeChild(e);
>}//自分でしらべたところ、appendChildとcloneNodeはわかったのですが(なんとなく…)、
>removeChildがどういうことがよくわかりませんでした。

これは、玉が一番上までいったら、必要ないので消している。と考えてね。
HTML内から外す。という意味で。


function getPosition(node) {
var x = 0, y = x;
do x += node.offsetLeft, y += node.offsetTop; while (node = node.offsetParent)
return {x: x, y:y};
}
は、あなたが求めていた
>画像の座標をどうやって取得すればいいのかがわかりません。(マウスはevent.offsetで取得してるのでそれに合わせたい)
の、回答に近いものです。nodeで指定された要素、つまり今回はid="waku"が、ページ上どこの座標にあるか求めるために
あります。
これで得られた値を、基準としてマウスの座標と引き算すれば、waku内でのマウスの位置がわかります

さて、これでしつもんにぜんぶこたえたかな? ばぶばぶばぶぅ~!

かいせつかぁ~。
へんなかきかただものね~。

>var FEND = true;
この変数は、ゲームのループを終了させるために使っている。
たとえば
if (FEND == true) { setTimeout(LOOP,10) }
と書けばよいのだけど
if (FEND) setTimeout(LOOP,10);
これも同じ。さらに
FEND && setTimeout( LOOP, 10);
これも同じ。



>var Pmouse = {x:240, y:600};
は、マウスの座標の初期値として利用している
例えば、
Pmouse = [240,600];
とすると、600の値を取得するのに
Pmouse[1]としなければならない。...続きを読む

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Q画像のpx値(X座標、Y座標)を知る方法

画像でpx値(X座標、Y座標)を知る方法を教えて下さい。
ソフトは、Illustrator10、PhotShop7.0があります。

Aベストアンサー

情報ウインドウにポインタの位置に対応したXとYの数値がリアルタイムで表示されますがそれではだめなのでしょうか。
単位をピクセルに設定すれば正確にわかりますけど。

Qjavaのクラス関係"$"について

Abc.javaでコンパイルすると、

Abc.classの他に、
Abc$1.class
Abc$2.class
が作成されます。
"$"これはどういった意味なのでしょうか?
また、何と読むのでしょうか?
ダラー?ドルマーク?

Aベストアンサー

前の回答では答えになっていなかったので補足させてもらいます。
申し訳ないです。

javaのコードをコンパイルすると、classごとにコードを機械語に翻訳したものがclassファイルとして生成されます。
しかし、ここで問題になるのが、classの中にclassがあったら(内部クラス)どうするの?ということです。
ここで同じAbc.classにするわけにはいかないので、Abc$1.classとすることでAbc.classの中にあるけど、別のクラスであることを明記的に区別しているのではないかと思われます。

Q例 の省略 ex と e.g.

これまで、「例」の省略として、e.g.(exempli gratia,for example)を使ってきたのですが、Ex.もよく見かけます(主に日本語の文中で)。
私の読む英文は学術系に偏っているので、e.g.しか使われないのかもしれないと思いました。普通の英文でもexは、使われることが多いのでしょうか。
goo辞書、アルク英辞郎、Yahoo辞書では、EXが、exampleの略とは出ていなかったので質問させていただきました。

Aベストアンサー

e.g.は文中の括弧内で例を列記するときに使いますよね(e.g. こ、ん、な、ふ、う、に)。

一方Ex.は、例文とかの文頭に使うのがほとんどじゃないでしょうか。Ex. こんなふうに。

Ex.は単にExampleの略、e.g.はfor exampleの略といった感じでしょうか。

参考URL:http://philosophy.byu.edu/classes/dj/phil200hwin05/Basic%20Grammar%20Packet%2010jan05.pdf

Q画像の座標取得

c言語を使って,
画像を読み込んできて,
画像上のクリックした画像の座標を取得する
プログラムを作りたいのですが,
どうすればよいでしょうか.

画像の読み込み→画像の表示→画像をクリック→画像の座標を取得
といった流れのものを作りたいです.

最初は保存されている静止画像を読み込んで座標を取得することをやり,
最終的にはUSBカメラなどを使って動画の座標の取得を目指しています.

使用OSはWindows7,
コンパイラはVisual Studio 2008をつかっております.

Aベストアンサー

OpenCVという画像処理ライブラリを使うといいでしょう。
クリックした座標の取得や、USBカメラからの動画取り込みのための関数も用意されているので、割と素早くできると思いますよ。

サンプルコード:
http://opencv.jp/sample/simple_gui.html


人気Q&Aランキング

おすすめ情報