JavaScript　画像上のクリックした指定座標にマークを付けるには

仕様として、DBから画像ファイルパスを取得後、それを利用して複数の画像を一つの画面に表示させます。

画像表示エリアは一つ一つ高さと幅が決められており、画像は見切れるのでoverflow scrollが設定されます。

その画像に対して、クリックした箇所にマークを付ける機能を実装したいです。
マークの付いた箇所の座標はDBへ保存され、他のページであっても画像上の同一座標にマークが表示されるような機能です。

画像上での座標の取得は分かったのですが、それを利用してマークを付ける処理が分かりません。単純に取得座標を設定しても座標の基準ポイントがウィンドウになってしまうので画像上の座標になりません。

端的に言うといつでもどこでも各画像とマークはセット。各画像の左上が基準の座標をマーク表示箇所として指定したい。ということです。
よって、ウィンドウ左上を基準として、誤差を加算するという手法が使えません。

JavaScriptでどのような処理をしたら良いでしょうか？
また、ブラウザがIE7なのであまり新しい技術は使えません。

ご教示宜しくお願い致します。
スペルミスや大文字小文字のミスはスルーして下さい。

【現在上手く行っていない実装】
※サンプルなのでDBなどは考慮せず、また、画像は一つでしか試してません。

HTML
1<script type="text/javascript">
2  var count;
3  function SetMark(x,y){
4    count++;
5    var element = document.createElement('p');
6    element.id = "id" + count;
7    element.innnerHTML = "●";
8    element.style.position = "absolute";
9    element.style.left = x + "px";
10    element.style.top = y + "px";
11    var obj = document.getElementById("imgArea");
12    obj.appendChild(element);
13  }
14</script>
15<body>
16  <div id="imgArea" style="width:500px; height:300px; overflow-x:scroll; overflow-y:scroll">
17    <img src="img.jpg" style="width:800px; height:500px;" onclick="SetMark(event.offsetX,event.offsetY)">
18  </div>
19</body>

【追記】
参考として仕様のイメージ画像を添付しました。
添付画像の画像１、画像２と登録されている分だけ画像が表示されます。
例として画像１の左側部分をクリックしてマークをつけた場合、その画像上の座標情報はDBに保存され、他のweb画面だろうが、画像の位置が少し変わっていようが、画像１という画像には左側部分のあくまで「画像上の固定された座標」にマークが記されます。
グーグルマップのようなイメージです。

行動規範の内容に同意します

回答1件

ベストアンサー

やり方としては基本的に下記サイトのような感じで、かつ addEventListener のかわりに attachEvent を使うことで IE7とか言う魔物にもわかるコードになると思われます。

【JavaScriptでマウスの位置座標を取得する方法】
https://syncer.jp/javascript-reverse-reference/get-mouse-position

【EventTarget.addEventListener - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

JavaScript
1// マウスイベントを設定
2element.attachEvent( "onclick", function( e ) {
3	// マウス位置を取得する
4	var mouseX = e.pageX ;	// X座標
5	var mouseY = e.pageY ;	// Y座標
6
7	// 要素の位置を取得
8	var elem = e.target || e.srcElement || window.event.target || window.event.srcElement || element;
9	var rect = elem .getBoundingClientRect() ;
10
11	// 要素の位置座標を計算
12	var positionX = rect.left + window.pageXOffset ;	// 要素のX座標
13	var positionY = rect.top + window.pageYOffset ;	// 要素のY座標
14
15	// 要素の左上からの距離を計算
16	var offsetX = mouseX - positionX ;
17	var offsetY = mouseY - positionY ;
18
19} ) ; // 環境が用意できないため未テスト

【javascript - Get the caller of the event from attachEvent - Stack Overflow】
http://stackoverflow.com/questions/11524762/get-the-caller-of-the-event-from-attachevent

投稿2016/06/01 17:21

kei344

総合スコア69400

DgRp_08

2016/06/01 18:11

回答有り難うございます。すみません、初心者で解読がスムーズにできず、上手くサンプルに組み込めません。『element.attachEvent( "onclick", function( e )』の部分の『element』はどの要素のことなのでしょうか。質問記載のサンプルと切り離すべき内容なのか、連携すべき内容なのかさえ判断ができておりません。。あと、座標の取得だけの処理のように見えますが、マークを付ける時は「offsetX／offsetY」の座標を指定すればいいということでしょうか？また、画像を画面に表示する時、その画面の左上だろうが真ん中だろうが右下だろうが、一度付けたマークは一度取得した「offsetX／offsetY」さえ指定すれば画像上では絶対に同じ位置にマークが付いてくれるという認識で大丈夫でしょうか。上手く解釈もできず試しもできず申し訳ありませんが教えていただけると助かります。宜しくお願い致します。

kei344

2016/06/02 10:46

> 『element.attachEvent( "onclick", function( e )』の部分の『element』はどの要素のことなのでしょうか。 elementはimg要素です。たくさんの画像が有るページであれば取得方法を考える必要があったので、手を抜きました。 > 座標の取得だけの処理のように見えます画像上の座標取得部分がわからないものだと思ったのでそこを書いたつもりです。要素（pなど）を固定の位置に置くのであればimg要素を包む要素に「position: relative;」を付ける必要があります。 > マークを付ける時は「offsetX／offsetY」の座標を指定すればいいということでしょうか？今質問文を見た所、画像の置かれているのがスクロールが発生する要素の中なので、そのスクロール分も計算する必要があります。【スクロール量を取得する－JavaScript入門】 http://www.pori2.net/js/window/9.html 【[JavaScript] スクロール量の取得 - JavaScript でどのくらいスクロールしたかを取得する】 https://www.ipentec.com/document/document.aspx?page=javascript-scroll 【Element.scrollLeft - Web APIs | MDN】 https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft 【Element.scrollTop - Web APIs | MDN】 https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop > また、画像を画面に表示する時、その画面の左上だろうが真ん中だろうが右下だろうが、一度付けたマークは一度取得した「offsetX／offsetY」さえ指定すれば画像上では絶対に同じ位置にマークが付いてくれるという認識で大丈夫でしょうか。だめです。回答に書かれた内容は「画像の中の左上からの位置」についてを取得しているだけです。たとえば画像が左から10pxの位置にある場合、画像の左端をクリックしたら「0」が取得できるといった感じです。また、「初心者」であるならIE7などではなく最新ブラウザを導入してまずはクリック座標について学ぶのをお勧めします。FirefoxであればWinXP/VISTAも対応しています。【Firefox - 46.0.1 System Requirements - Mozilla】 https://www.mozilla.org/en-US/firefox/46.0.1/system-requirements/

DgRp_08

2016/06/02 17:09

ご説明ありがとうございます。お手数おかけして申し訳ありません。私の考え方がズレていたせいで解釈に誤差が生じまくったようです。。質問文記載のコード内の「event.offsetX」等でクリック箇所の「画像上の座標」自体は既に取得できていたので、「座標の取得は完了した。この座標を使ってマーク付けるのどうしたらいいんだ？」と分割して考えていたので、座標を取得したのに意味が無いという状態でした。…と申し上げても正しく伝わらないと思いますが、私はいわゆるPGに関して勘の悪いタイプなので、ご容赦ください。とりあえず教えていただいた処理の流れに関しては一体どういうことだったのかイメージを掴むことが出来たのでなんとかなりそうです。ブラウザに関してはChromeやIE、Firefoxなどの最新環境については自前で整っていますが、IE7使用というのは好みではなく仕事で客先の本番環境なのでどうすることもできません。丁寧に教えていただいて本当にありがとうございました。

行動規範の内容に同意します