AREA tag's offsetLeft and offsetTop values work in IE, but appear broken in Chrome and Firefox

I have a simple image map:

<img alt="Image" src="./TestImage.jpg" usemap="#myMap" />
<map name="myMap" id="myMap">
    <area id="Fox" alt="Fox" shape="rect" coords="344,0,530,170" />
    <area id="Grass" alt="Grass" shape="rect" coords="80,160,250,280" />
</map>

I use jQuery to attach a mouseover event handler:

$(window).load(function () {
$('div map area').mouseover(function (e) {
  开发者_开发知识库  ...
}

I examine the element's offset:

var offset = $(this).offset();

When I hover over the Fox AREA, I see the following:

• IE returns the correct values: (344, 0)
• Chrome tells me the offset is (0,0)
• Firefox tells me the offset is (8, 76,8333...)

Why are Chrome and Firefox returning incorrect values and is there anything I can do to work around this issue?

You could fetch the "coords" attribute directly:

var coords = $(this).attr('coords').split(',');