質問: ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/b66bef9ef4c92e71dafd4526ccb6ca87.png)仕様として、DBから画像ファイルパスを取得後、それを利用して複数の画像を一つの画面に表示させます。 画像表示エリアは一つ一つ高さと幅が決められており、画像は見切れるのでoverflow scrollが設定されます。 その画像に対して、クリックした箇所にマークを付ける機能を実装したいです。 マークの付いた箇所の座標はDBへ保存され、他のページであっても画像上の同一座標にマークが表示されるような機能です。 画像上での座標の取得は分かったのですが、それを利用してマークを付ける処理が分かりません。単純に取得座標を設定しても座標の基準ポイントがウィンドウになってしまうので画像上の座標になりません。 端的に言うといつでもどこでも各画像とマークはセット。各画像の左上が基準の座標をマーク表示箇所として指定したい。ということです。 よって、ウィンドウ左上を基準として、誤差を加算するという手法が使えません。 JavaScriptでどのような処理をしたら良いでしょうか? また、ブラウザがIE7なのであまり新しい技術は使えません。 ご教示宜しくお願い致します。 スペルミスや大文字小文字のミスはスルーして下さい。 【現在上手く行っていない実装】 ※サンプルなのでDBなどは考慮せず、また、画像は一つでしか試してません。 ``` ``` 【追記】 参考として仕様のイメージ画像を添付しました。 添付画像の画像1、画像2と登録されている分だけ画像が表示されます。 例として画像1の左側部分をクリックしてマークをつけた場合、その画像上の座標情報はDBに保存され、他のweb画面だろうが、画像の位置が少し変わっていようが、画像1という画像には左側部分のあくまで「画像上の固定された座標」にマークが記されます。 グーグルマップのようなイメージです。
回答: やり方としては基本的に下記サイトのような感じで、かつ addEventListener のかわりに attachEvent を使うことで IE7とか言う魔物にもわかるコードになると思われます。 【JavaScriptでマウスの位置座標を取得する方法】 【EventTarget.addEventListener - Web API インターフェイス | MDN】 ``` // マウスイベントを設定 element.attachEvent( "onclick", function( e ) { // マウス位置を取得する var mouseX = e.pageX ; // X座標 var mouseY = e.pageY ; // Y座標 // 要素の位置を取得 var elem = e.target || e.srcElement || window.event.target || window.event.srcElement || element; var rect = elem .getBoundingClientRect() ; // 要素の位置座標を計算 var positionX = rect.left + window.pageXOffset ; // 要素のX座標 var positionY = rect.top + window.pageYOffset ; // 要素のY座標 // 要素の左上からの距離を計算 var offsetX = mouseX - positionX ; var offsetY = mouseY - positionY ; } ) ; // 環境が用意できないため未テスト ``` 【javascript - Get the caller of the event from attachEvent - Stack Overflow】