jQuery-如何在图像上添加标记

Question

我正在考虑如何在图像上添加一些标记（我的意思是像在Google地图中一样-标记地方）。 我有一个图像，如果用户单击该图像，我想在用户单击的那个地方添加其他图像。 例如，如果用户单击图像中的3个位置，我想在此位置添加3个图像...

我知道如何获得用户点击的路线，但我不知道如何在这些地方添加我的图片...

并需要使用AJAX吗？

因此，我想向您询问帮助，我将适合您的每一个提示。 谢谢。

Answer 1

有几种方法可以执行此操作，例如，您可以将图像简单地设置为某个div的背景（也可以使用position: relative;在该div上），然后单击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/