jQuery - how to add mark to image

Question

I am thinking how to add some marks to an image (I mean something like in google maps - marks for places). I have an image and if the user will clicked to this image, co I want on that place, where user clicked, add some other image. For example, if the user will click on 3 places in image, I would like to add on this places 3 my images...

I know, how to get the directions, where the user clicked, but I don't know, how on that places add my image...

And will be needed AJAX for it?

So I would like to ask you about help, I will appropriate for each of hints. Thank you.

Answer 1

There are several ways of doing this, for instance you can simple set your image as a background of some div (use also position: relative; on that div) and then onclick you can create/move/show other image, setting position: absolute; to it and positioning it with top and left.

Example CSS:

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

Example HTML:

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

Example JS (using 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');
    })
});

Working example http://jsfiddle.net/uKkRh/1/