画像をクリックしてその地点の座標を変数ｘ、ｙに代入したいのですが

質問

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

回答No.2

mahny

<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?JavaScript%A5%E1%A5%E2

お礼

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

回答No.1

kikanbo

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づつやるとエリアが莫大になります。
それかマウス位置を判定すると出来ますが、画像の配置位置によってはブラウザでずれます。

お礼

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