我正在尝试向图像添加标记。我认为将其转换为图像映射既无用也不实际。
用户单击图像时,应放置一个标记。我可以检索相对坐标,但是由于无法获得我认为的绝对坐标,因此无法放置标记。
我正在尝试执行与此插件非常相似的操作: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);
});