areaタグの位置をoffset()でうまく取得できない

areaタグの位置をjQueryのoffset()で取得しようとしたところ、IEでは取得できたのですが、FirefoxとGoogle Chromeでうまく取得できなかったので、対応方法をメモしておきます。

サンプルコード

うまく取得できなかった場合のコードです。

HTML

<div class="map-box">
	<img src="image.jpg" alt="" width="481" height="360" usemap="#map" />
	<map name="map">
		<area shape="poly" coords="253,131,284,158,318,178,341,251,338,282,327,276,328,291,305,292,296,276,281,279,265,300,248,298,272,279,250,266,236,243,236,203,241,194,228,163,213,151,223,151,251,132" href="#" class="area">
		<area shape="poly" coords="0,325,481,270,481,360,0,360" href="#" class="area">
	</map>
</div>

JavaScript

$(function() {
	$('.area').hover(function() {
		console.log('over', $(this).offset().top);
	}, function() {
		console.log('out');
	});
});

IEではそれぞれのareaのtopの座標(131と270)が取得できましたが、chromeとFirefoxでは0が返ってきました。
areaタグの位置をoffset()で取得するデモページ
　

areaタグのcoordsの値を取得して、そこからtopとleftの値を決めることで対応できそうです。

JavaScript

$(function() {
	$('.area').hover(function() {
		var coords = $(this).attr('coords').split(',');
		console.log('over', coords);

		var thisLeft = coords[0];
		var thisTop = coords[1];
		for (var i = 0; i < coords.length; i++) {
			if(i % 2 == 0) {
				thisLeft = Math.min(thisLeft, coords[i]);
			} else {
				thisTop = Math.min(thisTop, coords[i]);
			}
		}
		console.log('left', thisLeft, 'top', thisTop);
	}, function() {
		console.log('out');
	});
});

対応後のデモページ
ただし、coordsの値はimg上の座標になるので、ページ全体の座標を取得したい場合、imgタグの座標をoffset()で取得してから足す必要があります。
　

【参考サイト】

• javascript – AREA tag’s offsetLeft and offsetTop values work in IE, but appear broken in Chrome and Firefox – Stack Overflow