クリックすると画像を表示するタグ

http://www.openspc2.org/reibun/javascript/mouse/ …に、1つだけ表示するタグが載っていたのですが、次々にクリックするとたくさん表示されるようにしたいです。

質問者からの補足コメント

• ひとつの画像をなんどもつかいたいです。

  No.2の回答に寄せられた補足コメントです。 補足日時：2019/05/15 18:44

No.3 ベストアンサー 回答者： yambejp 回答日時： 2019/05/15 19:06

たとえば1.jpgが参照できる状態だとしてこうしてください

<script>
window.addEventListener('DOMContentLoaded', function(){
var img=document.createElement('img');
img.src="1.jpg";
img.style.position="absolute";
document.addEventListener('click', function(e){
var cln=img.cloneNode();
cln.style.top=e.offsetY;
cln.style.left=e.offsetX;
document.querySelector('body').append(cln);
});
});
</script>
<img src="1.jpg">

この回答へのお礼

優しい世界に感謝します

お礼日時：2019/05/16 05:58

No.2 回答者： yambejp 回答日時： 2019/05/15 11:33

いろんな画像があるの？ひとつの画像をなんどもつかうの？

No.1 回答者： fujillin 回答日時： 2019/05/15 09:39

こんにちは

＞1つだけ表示するタグが載っていたのですが、
ご提示のサイトのスクリプトは、「ひとつだけ表示する」のではなく、「表示されている画像の位置をクリックされた位置へ移動する」というものですね。


＞次々にクリックするとたくさん表示されるようにしたいです。
同じ画像が増加すれば良いのか、異なる画像なのか、など不明点が多いですが、もしも追加表示なさりたいのであれば、画像要素（=IMG要素）をドキュメント内に追加生成することが必要になります。
一般的には
　createElement()、appendChild()などのメソッドを利用して行うことになるでしょう。
要素を追加生成する例
http://cly7796.net/wp/javascript/create-elements …


ボタンクリックなどに対応して増加するのであれば
https://sites.google.com/site/westinthefareast/h …
上記を、画面クリックに変えればご希望の内容になるのかも知れません。


クリックではありませんが、以下のサイトではマウスストーカー的にマウスの位置に小さな星（「+」の記号）を表示し、落下してゆくアニメーションを行っていますが参考になるかも知れません。（コンテンツもマウスストーカー関連の情報になっていますが）
http://oekakirenn.webcrow.jp/mouse_setumei.html


※ 上記それぞれの具体的なスクリプトをご覧になりたい際には、各サイト内の解説をお読みになるか、解説が無い場合は「ページのソース表示」などを利用することで閲覧可能です。

この回答へのお礼

ありがとうございます！

お礼日時：2019/05/16 05:59