我正在尝试向图像添加标记。我认为将其转换为图像映射既无用也不实际。

用户单击图像时,应放置一个标记。我可以检索相对坐标,但是由于无法获得我认为的绝对坐标,因此无法放置标记。

我正在尝试执行与此插件非常相似的操作:http://waynegm.github.io/imgNotes/examples/basic_interactive.html(单击底部的编辑,然后单击图像)

这是我的代码:http://jsfiddle.net/m3HXe/

$('#AddSensors_img').click(function (e) {
    var rpos = [];
    rpos.x = e.pageX - this.offsetLeft;
    rpos.y = e.pageY - this.offsetTop;

    if (rpos) {

        var el = $(document.createElement('span')).addClass("marker black").html("1");
        var pos = [];

        var offset = $(this).offset();
        pos.x = Math.round($(window).scrollLeft()-rpos.x);
        pos.y = Math.round($(window).scrollTop() -rpos.y);
         console.log(pos);

        if (pos) {
            $(el).css({
                left: (pos.x),
                top: (pos.y),
                position: "absolute"
            });
        }
    }
});

还尝试了这个:
$('#AddSensors_img').click(function (e) {
    var rpos = [];
    rpos.x = e.pageX - this.offsetLeft;
    rpos.y = e.pageY - this.offsetTop;
    var marker = $('span').addClass('marker black').html("1");
    marker.css({
        left: rpos.x,
        top: rpos.y
    })
    marker.appendTo(this);

});

最佳答案

您可以创建一个包含postion: relative的包装程序,而图像将包含position: absolute(与标记相同),然后可以使用offset获取相对值并用于放置一个标记。

的HTML:

<div id="wrapper">
   <img src="some_image.png"/>
</div>

CSS:
#wrapper { position: relative; }
#wrapper img, #wrapper .marker { position: absolute; }
#wrapper .marker { z-index: 100; }
#wrapper img { top: 0; left: 0; }

javascript:
var $wrapper = $('#wrapper');
$('#wrapper img').click(function(e) {
    var $this = $(this);
    var offset = $this.offset();
    $('<span>1</span>').addClass('marker').css({
        left: e.pageX-offset.left,
        top: e.pageY-offset.top
    }).appendTo($wrapper);
});

10-05 20:55
查看更多