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

Create a mark on an image using relative positioning?

本文关键字：创建 图像 相对 定位      更新时间：2023-09-26

我希望能够标记用户单击的图像，存储坐标，然后能够在以后的时间重新创建标记。我已经得到了存储部分，但我有麻烦，使标记图像显示在图像上。

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

看起来像jQuery的位置会给我相对于父的位置，但从那里我将如何创建和定位标记图像相对于父?任何帮助都将非常感激。由于

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

跟随@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);
};

这应该是你想要的:

$('img').click(function(event) {
  var x = event.pageX - this.offsetLeft;
  var y = event.pageY - this.offsetTop;
  alert('X: ' + x + ''nY:' + y);
});

您将遵循以下步骤:

  1. 给#container设置这个样式

    容器{位置:相对;}

  2. 给出将显示此样式的标记的图像

    标记{位置:绝对的;left://left from jQuerytop://jQuery的顶部位置}

相关文章：