仕様として、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>
【追記】
参考として仕様のイメージ画像を添付しました。
添付画像の画像1、画像2と登録されている分だけ画像が表示されます。
例として画像1の左側部分をクリックしてマークをつけた場合、その画像上の座標情報はDBに保存され、他のweb画面だろうが、画像の位置が少し変わっていようが、画像1という画像には左側部分のあくまで「画像上の固定された座標」にマークが記されます。
グーグルマップのようなイメージです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/01 18:11
2016/06/02 10:46
2016/06/02 17:09