Question

这可能吗？我正在尝试找到与浏览器相关的元素的x和y坐标。

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

不起作用。

有没有办法做到这一点？

~~http://adamsaewitz.com/housing/~~
突出蓝色房间070

Answer 1

问题在于您正在访问区域元素的顶部/左侧。

区域元素不位于其坐标所说的位置。这是由dom / browser在幕后处理的。

所以你需要找到area与之相关的图像并抓住它的偏移量。

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

然后，您获取coords的{{1}}属性并将其拆分为area / left / top并使用这些属性来确定位置在图像内。

width

考虑出现的信息框的宽度/高度（，因为你为它设置了动画，也考虑到了），然后你就可以了

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

演示：http://www.jsfiddle.net/XBjwN/

Answer 2

编辑更新的问题：由于您使用的是<area>，因此它是一个不同的故事，从coords属性获取更容易，如下所示：

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

偏移量只是考虑工具提示本身的硬编码宽度/高度。除上述内容外，您还希望使用top和left而不是margin-top和margin-left。另外，要考虑页面中#content <div>的位置，请为工具提示设置relative位置，如下所示：

#content { position: relative; }

然后...而不是.after()，请使用.append()，以便在内添加。

You can test the result here

原始问题：
对象.position()返回top和left属性...但无论如何你想要.offset()（它相对于文档，其中{ {1}}相对于偏移父级），因此它应如下所示：

.position()

或者这个：

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，那么你也在创建（或试图）全局变量，这将在IE中爆炸

Answer 3

$(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"))
            }, )
        });

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

3 个答案: