イメージマップにJavaScriptでイベントを追加する

イメージマップのareaタグにJavaScriptでイベントを追加できるかどうかを試してみました。

サンプルコード

クリックイベントとホバーイベントを設定してみます。

HTML

<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>

JavaScript

$(function() {
	$('map').hover(function() {
		console.log('map-over');
	}, function() {
		console.log('map-out');
	});
	$('.area').hover(function() {
		console.log('area-over', $(this).index());
	}, function() {
		console.log('area-out', $(this).index());
	});
	$('.area').on('click', function(e) {
		console.log('area-click', $(this).index());
		e.preventDefault();
	});
});

イメージマップにイベントを追加するデモページ
areaタグのイベント追加は問題なく追加できましたが、mapタグのホバーイベントはareaタグにホバーしたときのみ発生するようでした。