jQuery - 画像にマークを付ける方法

Question

画像にマークを付ける方法を考えています（Googleマップのようなもの - 場所のマーク）。私はイメージを持っており、ユーザーがこのイメージをクリックすると、その場所で、ユーザーがクリックして他のイメージを追加したいと思う。たとえば、ユーザーが画像内の3つの場所をクリックすると、この場所に3つの画像を追加したいと思います...

私が知っているのは、ユーザーがクリックした方向を取得する方法ですが、どのようにその場所に私のイメージを追加するか知っています...

それにAJAXが必要でしょうか？

ですから、私はあなたに助けを求めています。私はそれぞれのヒントのために適切です。 ありがとうございます。

Answer 1

いくつかのdivの背景としてイメージを設定することができます（そのdivにposition: relative;も使用します）。次にonclickを使用して、他のイメージを作成/移動/表示することができます。position: absolute;それをtopとleftと置きます。

例CSS：

#container { 
    background: green; 
    width: 1000px; 
    height: 500px; 
    position: relative; 
} 
#container img { 
    position: absolute; 
} 

例HTML：

<div id="container"></div> 

例JS（jQueryのを使用して）：

$(document).ready(function() { 
    $("#container").click(function(e) { 
     e.preventDefault(); 
     var x = e.pageX - this.offsetLeft; 
     var y = e.pageY - this.offsetTop; 
     var img = $('<img>'); 
     img.css('top', y); 
     img.css('left', x); 
     img.attr('src', 'http://img34.imageshack.us/img34/3337/imglp.png'); 
     img.appendTo('#container'); 
    }) 
}); 

の作業例http://jsfiddle.net/uKkRh/1/