javascript初心者です。クライアント座標を使って画像を表示したいのですが行き詰まっております

解決済

質問者：トム2
質問日時：2018/05/24 23:21
回答数：2件

javascript初心者です。クライアント座標を使って画像を表示したいのですが行き詰まっております。ご教授願います。

クライアント座標を下記のようにプログラムして、画面をクリックするとその座標が分かるようになったのですが、画像をその位置に表示する方法が分かりません。
<img src="pic00.png" style="☆☆☆">の☆☆☆にx=60 y=70のような感じに書き込みたいのですが、書き方が分からなくて困っています。
また、あとで他の画像の位置設定が楽になるようにx1=60、x2=70という感じで初めに設定しておく方法も考えたのですが、どこにどう書けば良いかが分かりません。

↓クライアント座標の設定↓
<script>
function init()
{
window.onmousedown = handleMouseMove;
function handleMouseMove(event) {
event = event || window.event;
target = document.getElementById("output_client");
target.innerHTML = "Client X:" + event.clientX + ", Client Y:" + event.clientY;
}
}
</script>

</head>
<body onload="init();">
<div id="output_client" ></div>
<div id="output_screen"></div>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2018/05/25 11:24

こんにちは

HTMLでブラウザ上の表示ということで回答しています。

文書構成が不明ですが、（画像）要素の位置を指定して表示するのにはCSSの仕組みを利用します。
具体的には、要素のstyle属性の必要な値を設定（変更）することで実現できます。

要素の位置を指定するには、その要素のmarginで指定する、親要素のpaddingで指定する、position:abusoluteにしてtop/leftを指定するなどの方法が考えられます。
いずれにしろ、親要素（parentNode、position:absoluteの場合はoffsetParent)の位置に対する相対位置になってしまいますので、文書構成に合わせて計算する必要があります。

一番簡単なのは、marginなしのbodyに対してposition:abusoluteで指定できるような構成にしておけば、計算はしなくともよくなりますね。
ちなみに、スクリプトからtop/left等の値を設定するには、
　Element.style.top/left 等の値をCSS同様に設定してあげればよいです。
（他の値の指定も同様です）
https://developer.mozilla.org/ja/docs/Web/API/HT …

上記の位置は、CSS同様に画像要素の左上の位置を指定していることになりますので、例えば「画像の中央を指定位置に合わせたい」というような場合は、画像サイズ（縦/横）のそれぞれ半分を左上にずらした位置に表示してあげればよいといった要領になります。