0

第 1 步：我有一个尺寸为 400x300 的图像。现在，我单击图像并找到单击位置（顶部，左侧）并用小图像图标标记该位置，并将此信息保存到数据库中（顶部和左侧）。

第 2 步：现在我有相同的图像，但尺寸为 (700*500)。现在，我想显示在步骤 1 中存储在数据库中的单击位置，并在此图像上显示一个小图像图标。

问题：问题是对于大小为 400*300 的图像，外观位置是正确的，但是对于大小为 700*500 的图像，我们在将图标放置在单击位置时遇到问题。在这两种情况下，小图标的 (top,left) 的值都是相等的。

这整个过程我想通过 jQuery 来完成。请建议

4

2 回答 2

0

像这样的东西可以用来实现ckaufman的建议。

image1.click(function(e) {
    var offset = $(this).offset(),
        width = $(this).width(),
        height = $(this).height(),
        leftPercent = (e.clientX - offset.left)/width,
        topPercent = (e.clientY - offset.top)/height;

    // position marker image appropriately and 
    // store leftPercent and topPercent in database
});

然后要在同一图像的不同大小版本上设置标记的位置，您可以执行以下操作：

var leftPercent = .45, // from database
    toppercent = .23

image2.load(function() {
    var width = $(this).width(),
        height = $(this).height(),
        leftPosition = Math.round(leftPercent*width),
        topPosition = Math.round(topPercent*height);

    // set the marker position to leftPosition and topPosition
    // note: this is relative to the top left of the main image
});
于 2012-05-16T21:05:46.650 回答
0

请查看我的代码

获取Marking时的点击位置即为image1的点击事件

      var PosX = 0;
                    var PosY = 0;
                    var ImgPos;
      //here i am getting the exact position of image with size (400*300)
                    ImgPos = FindPosition(sender);
                    if (!e) var e = window.event;
                    if (e.pageX || e.pageY) {
                        PosX = e.pageX;
                        PosY = e.pageY;
                    }
                    else if (e.clientX || e.clientY) {
                        PosX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
                        PosY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
                    }
     //these two value i am saving in database
                    PosX = PosX - ImgPos[0];
                    PosY = PosY - ImgPos[1];
      //gettting the position of image 
                    function FindPosition(oElement) {
                    if (typeof (oElement.offsetParent) != "undefined") {
                        for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
                            posX += oElement.offsetLeft;
                            posY += oElement.offsetTop;
                        }                                                  
                        return [posX, posY];

                    }
                    else {
                        return [oElement.x, oElement.y];
                    }
                }
于 2012-05-17T05:36:07.480 回答