jQuery - 如何为图像添加标记 [英] jQuery - how to add mark to image

问题描述

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

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...

并且需要AJAX吗？

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

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

推荐答案

有几种方法可以做到这一点，例如你可以简单地将图像设置为一些div的背景（在该div上也使用 position：relative; ）然后点击你可以创建/移动/显示其他图像，设置位置：绝对; 并将其定位为 top 和 left 。

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.

示例CSS：

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

示例HTML：

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

示例JS（使用jQuery）：

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');
    })
});

工作示例 http://jsfiddle.net/uKkRh/1/

这篇关于jQuery - 如何为图像添加标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！