jQuery - 如何为图像添加标记

Question

我正在考虑如何为图像添加一些标记(我的意思是谷歌地图中的标记 - 地方标记).我有一个图像,如果用户点击这个图像,我想在那个地方,用户点击,添加一些其他图像.例如,如果用户点击图片中的3个位置,我想在此处添加3个我的图片...

我知道,如何获取方向,用户点击的位置,但我不知道,如何在那些地方添加我的图像...

并需要AJAX吗？

所以我想问你一些帮助,我会适合每一个提示.谢谢.

Answer 1

有这样做的几种方法,比如,你可以简单的设置你的形象,一些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/