/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]">
  <meta charset="utf-8">
  <title>グラフなど、画像の一部分にクリックイベントを与えたい場合はクリッカブルマップを使う</title>
</head>
<body>
  <h1>javascript部分をクリック</h1>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQuZeG8oaTSnTU54U--7MaE7ZRq8fgi_La3MCaacBG3o3taZjcO" alt="" border="0" usemap="#Map" width="100%"/>
  <map name="Map" id="Map">
<area id="Area1" shape="poly" coords="548,390,314,585,313,605,399,643,498,659,618,661,617,638" href="javascript:void(0)" alt="" />
</map>
<script>

    document.getElementById('Area1').addEventListener('mousedown',function(){
  alert("人気です");
});
</script>


</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="[add your bin description]">
	<meta charset="utf-8">
	<title>グラフなど、画像の一部分にクリックイベントを与えたい場合はクリッカブルマップを使う</title>
	</head>
	<body>
	<h1>javascript部分をクリック</h1>
	<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQuZeG8oaTSnTU54U--7MaE7ZRq8fgi_La3MCaacBG3o3taZjcO" alt="" border="0" usemap="#Map" width="100%"/>
	<map name="Map" id="Map">
	<area id="Area1" shape="poly" coords="548,390,314,585,313,605,399,643,498,659,618,661,617,638" href="javascript:void(0)" alt="" />
	</map>
	<script>

	document.getElementById('Area1').addEventListener('mousedown',function(){
	alert("人気です");
	});
	</script>


	</body>
	</html>