Получить положение области карты (HTML)?

Question

Возможно ли это? Я пытаюсь найти координаты x и y элемента относительно браузера .

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

Не работает.

Есть ли способ сделать это?

http://adamsaewitz.com/housing/
выделите синюю комнату 070

Answer 1

Проблема заключается в том, что вы получаете доступ к верхнему / левому элементу области.

Элемент area не расположен там, где говорят его координаты.Домой / браузер обрабатывает это за кулисами.

Так что вам нужно найти изображение, к которому относится area, и захватить его смещение.

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

Затем вы беретеcoords атрибут 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)
            };

Примите во вниманиеширина / высота отображаемого информационного окна (, и поскольку вы его анимируете, примите это во внимание также ), и вы получите

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

demo :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(), чтобы добавить внутри этого родителя.

Вы можете проверить результат здесь .

---

Для исходного вопроса :
Возвращаемый объект .position() имеет свойства top и left ... новы все равно хотите .offset() здесь (это относительно документа , где .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, разделенного запятыми, или 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"))
            }, )
        });