Javascript 获取地图区域的位置（html）？

这可能吗？我试图找到元素相对于浏览器的x和y坐标

var position = $(this).position();
    x = position.left;
    y = position.right;

不起作用

有没有办法做到这一点

http://adamsaewitz.com/housing/
突出显示蓝色房间070，以编辑更新的问题：因为您使用的是

，所以要将其添加到父级中



原始问题：

返回的对象具有
顶部
和
左侧
属性…但您仍然需要此处（它相对于文档，其中
.position（）
相对于偏移父对象），因此它应该如下所示：

var position = $(this).attr('coords').split(',');
x = +position[0] - 50;
y = +position[1] - 170;

#content { position: relative; }

var position = $(this).offset(),
    x = position.left,
    y = position.top; //not right!

或者这个：

var position = $(this).offset();
var x = position.left;
var y = position.top;

…但是如果没有单个
var
逗号分隔语句，或者每行都没有
var
，那么您也在创建（或试图创建）全局变量，这将在IE中爆炸。
问题在于，您访问的是区域元素的顶部/左侧

区域元素未定位在其坐标表示的位置。这是由dom/浏览器在后台处理的

因此，您需要找到与
区域相关的图像，并获取其偏移量

var imgId = $(this).closest('map').attr('name');
var imgPos = $('#' + imgId).offset();

然后，抓取
区域的
坐标
属性
并将其拆分为
左侧
/
顶部
/
宽度
，并使用这些属性确定图像内部的位置

var coords = $(this).attr('coords').split(',');
var box = {
            left: parseInt(coords[0],10),
            top: parseInt(coords[1],10),
            width:  parseInt(coords[2],10)-parseInt(coords[0],10),
            height:  parseInt(coords[3],10)-parseInt(coords[1],10)
            };

考虑到出现的信息框的宽度/高度（既然你设置了它的动画，也要考虑到这一点），你就可以

x = imgPos.left + box.left + box.width/2 - 65; // 65 is the info width/2
y = imgPos.top + box.top -20 -160 -1; // 20 is the animation, 160 is the info height, 1 is a safe distance from the top

演示：
逗号运算符的奇怪用法。哈哈，哇，这是一个迟到的信号。但这仍然不起作用，对不起。@Switz-什么不起作用？注意，您需要的是
.offset（）
而不是
.position（）
，它是相对于父文档而不是
文档的。我使用的是全局运算符。实例是在前面创建的。@Switz，这应该可以按照您的需要工作。。您需要从坐标获取信息，但同时调整图像（它们指向）偏移。此外，您还需要调整信息框的宽度/高度以及区域宽度。这里不需要额外的开销，只需给父对象一个
相对的
位置，就可以以更干净的方式处理偏移量，请参阅我答案中的注释，以获取此演示的链接。好观点@Nick。在本例中，相对的
#content
确实解决了这个问题。但是如果在
#content
中有任何其他内容（顾名思义可能有），在图像之前就不会有。映射对象也可以在其他地方定义。正确、有效的关注点，但我仍然会选择
relative
选项，如果每个对象周围都需要
，那么我仍然认为这是一种更干净、更通用的方法，因为您有一个一致的
.closest（）
父对象，可以方便地将元素放入其中。@nick，同意！这是你的方式。（但是，
.closest（）
中使用的
映射
对于区域元素是必需的）
$(document).ready(function () {
            $('map').imageMapResize();
            $('area').hover(function () {
                $('.imgpopover').css({ "display": "block", "top": $(this).attr("coords").split(',')[1]+"px", "left": $(this).attr("coords").split(',')[0]+"px" })
                $('.imgpopover label').text($(this).attr("title"))
            }, )
        });