![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
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>
No.1ベストアンサー
- 回答日時:
こんにちは
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同様に画像要素の左上の位置を指定していることになりますので、例えば「画像の中央を指定位置に合わせたい」というような場合は、画像サイズ(縦/横)のそれぞれ半分を左上にずらした位置に表示してあげればよいといった要領になります。
No.2
- 回答日時:
CSSは分かりますか?
position: absolute;
というスタイルを学習することを勧めます。
jqueryとか使えば、JSからのCSSの操作は
とても簡単ですよ。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウンの位置がwin/macでず...
-
画像をドラッグ&ドロップで移...
-
textareaに画像を表示したい
-
javascriptで毎月替わる画像
-
画像ランダム表示、しかしダブ...
-
Javascriptでリンク画像を1時...
-
画像クリックで別の場所の画像...
-
HTMLで条件分岐はできますか?
-
画像のランダム表示、及び画像...
-
JavaScriptとチェックボックス...
-
WEBページ立ち上げ時に1回のみ...
-
Javascript で共通の処理をどこ...
-
innerHTMLで、表示すると、一部...
-
画像の重なりの順序を代える方...
-
透過pngの透明部分以外をクリッ...
-
マウスオーバーと背景画像の固定
-
クリッカブルマップの一部分だ...
-
画像削除機能を付けたい
-
1枚の画像をクリックして複数の...
-
複数の画像を先に読み込ませ表...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
Javascriptで指定した日付と時...
-
javascriptで毎月替わる画像
-
画像をフォルダに入れれば表示...
-
画像の重なりの順序を代える方...
-
スワップイメージが上手く動作...
-
JavaScriptとチェックボックス...
-
透過pngの透明部分以外をクリッ...
-
Gifアニメ、最後のコマに行った...
-
bxsliderにて読み込み後に内容...
-
Javascript で共通の処理をどこ...
-
1枚の画像をクリックして複数の...
-
各フォルダから1枚ずつ画像をラ...
-
画像を切り替えランダム表示
-
画像削除機能を付けたい
-
マウス追従スクリプトについて
-
画像ランダム表示、しかしダブ...
-
<table>、もしくは<iframe>内で...
-
1枚の画像をクリックすると複数...
-
画像とテキストのセットをラン...
おすすめ情報