jQuery - как добавить марку к изображению - PullRequest
Новая
       15

jQuery - как добавить марку к изображению

1 голос
/ 06 августа 2011

Я думаю, как добавить некоторые метки к изображению (я имею в виду что-то вроде в картах Google - метки для мест).У меня есть изображение, и если пользователь щелкнет по этому изображению, то я хочу, чтобы в том месте, где пользователь щелкнул, добавьте другое изображение.Например, если пользователь будет нажимать на 3 места на изображении, я бы хотел добавить на эти места 3 моих изображения ...

Я знаю, как проложить маршрут, где пользователь нажал, но яне знаю, как на этих местах добавить мое изображение ...

и понадобится ли для него AJAX?

Так что я хотел бы попросить вас о помощи, я буду подходить для каждогонамеков.Спасибо.

1 Ответ

7 голосов
/ 06 августа 2011

Есть несколько способов сделать это, например, вы можете просто установить свое изображение в качестве фона некоторого div (используйте также position: relative; для этого div), а затем щелкнуть мышью, чтобы создать / переместить / показать другое изображение, установив 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/

...