Get position of map area(html)?

Question

Is this possible? I'm trying to find the x and y coordinates of the element in relation to the browser.

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

Doesn't work.

Is there any way to do this?

http://adamsaewitz.com/housing/
highlight the blue room 070

Answer 1

The problem lies in the fact that you are accessing the top/left of an area element.

The area element is not positioned where its coords say. This is handled behind the scenes by the dom/browser.

So you need to find the image that the area relates to and grab its offset.

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

Then, you grab the coords attribute of the area and split it to get left/top/width and use those to pinpoint the location inside the image.

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

Take into consideration the width/height of the info box that appears (and since you animate it, take that into consideration as well) and you get to

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/