javascript - 使用 jQuery 绘制图像以获取 X/Y 坐标。就像 Dreamweaver 中的图像映射

Question

有没有一种方法可以在图像周围绘制并获取 Dreamweaver 中的图像映射等坐标。

然后我想使用坐标，以便用户可以根据他们单击的图像的哪个部分获取有关图像的信息。喜欢http://store.nike.com/us/en_us/product/free-flash-id/builder/

问题是我不知道如何获取坐标。我希望能够追踪图像并获取坐标。然后在函数中使用坐标。当用户在坐标内点击时，js会说“你刚刚点击了图像的这个区域”

谢谢！

Answer 1

您可以像这样（小提琴：http: //jsfiddle.net/j8DBw/ ）在图像（相对于图像）内获取用户单击的坐标：

var imageCoords = $("img").offset();

$("img").click(function(event){
    var clickPageCoords = {
        x:event.clientX,
        y:event.clientY
    }

    var imageRelativeCoords = {
        x: clickPageCoords.x - imageCoords.left,
        y: clickPageCoords.y - imageCoords.top,
    }
    console.log(imageRelativeCoords);
})

Answer 2

我认为图像映射只是 Dreamweaver 的一项功能。在 VeXii 发表评论后，我找到了这些解决方案。

http://www.maschek.hu/imagemap/

http://www.image-maps.com/

感谢大家的帮助！