javascript - 使用相对定位在图像上创建标记？

Question

我希望能够标记用户点击的图像，存储坐标，然后能够在以后重新创建标记。我已将存储部分取下，但我无法让标记图像显示在图像上。

我发现了一个类似的问题here使用绝对定位，但我希望坐标相对于图像。

看起来像 jQuery position会给我相对于父级的位置，但是从那里我将如何创建和定位标记图像相对于父级的位置？任何帮助将不胜感激。谢谢

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


$(document).ready(function() {
    $("#imgtoclick").click(function(e) {
        e.preventDefault();
        var left = this.position.left;
        var top = this.position.top;
    //how to create mark image relative to parent
        var img = $('<img>');
    })
});

Answer 1

跟随@Blenders 的帖子，但如果你的图像嵌套在定位元素中，你将需要递归地获取坐标:

var myImg = ...

var getAbsoluteOffset = function (el) {
  var x=0, y=0;
  while (el) {
    x += el.offsetLeft;
    y += el.offsetTop;
    el = el.offsetParent;
  };
  return {x:x,y:y};
}

myImg.onclick = function(evt) {
  var offset, x, y;
  offset = getAbsoluteOffset(this);
  var x = evt.pageX - offset.x;
  var y = evt.pageY - offset.y;
  alert('x: ' + x + '\ny: ' + y);
};