HTMLのイメージマップのボタンをクリックするとボタンと紐づいた画像が表示されるようにしたい。

Question

【jQuery】

$(function(){
	$(".area");
	$(".fadein_img_wrapper img").hide();
	
	//リンクのボタン=i
	//画像=k
	$(".area").each(function(i){
		console.log(($(this)+i));
		$(".fadein_img_wrapper img").each(function(k){
			console.log(($(this)+k));
			
			$(".area").on("click", function(){
				if(k==i){
					$(".fadein_img_wrapper img").stop().fadeToggle();
				}
			});
		});
	});
});

【HTML】

		<figure>
<img src="images/factory_1f.jpg" usemap="#ImageMap"  alt="工場の見取り図のボタン" />
<map name="ImageMap">
  <area class="area0 area" shape="circle" coords="40,239,21"  alt="工場の見取り図のボタン" />
  <area class="area1 area" shape="circle" coords="150,280,20"  alt="工場の見取り図のボタン" />
  <area class="area2 area" shape="circle" coords="336,310,12"  alt="工場の見取り図のボタン" />
  <area class="area3 area" shape="circle" coords="343,338,13" alt="工場の見取り図のボタン" />
  <area class="area4 area" shape="circle" coords="648,376,12"  alt="工場の見取り図のボタン" />
  <area class="area5 area" shape="circle" coords="560,243,12" href="#"  alt="工場の見取り図のボタン" />
  <area class="area6 area" shape="circle" coords="556,159,14" href="#"  alt="工場の見取り図のボタン" />
  <area class="area7 area" shape="circle" coords="583,119,14" href="#"  alt="工場の見取り図のボタン" />
  <area class="area8 area" shape="circle" coords="605,81,13" href="#"  alt="工場の見取り図のボタン" />
  <area class="area9 area" shape="circle" coords="478,119,13" href="#"  alt="工場の見取り図のボタン" />
  <area class="area10 area" shape="circle" coords="443,153,12" href="#"  alt="工場の見取り図のボタン" />
  <area class="area11 area" shape="circle" coords="367,157,14" href="#"  alt="工場の見取り図のボタン" />
  <area class="area12 area" shape="circle" coords="340,180,14" href="#"  alt="工場の見取り図のボタン" />
  <area class="area13 area" shape="circle" coords="291,141,14" href="#"  alt="工場の見取り図のボタン" />
</map>
			<div class="fadein_img_wrapper">
				<img class="link_img_1" src="images/area_0.JPG" alt="工場入口">
				<img class="link_img_2" src="images/area_1.JPG" alt="工場入口">
				<img class="link_img_3" src="images/area_2.JPG" alt="工場入口">
			</div><!--/.fadein_img_wrapper -->
</figure>

【CSS】

.factory_wrapper {
	position: relative;
}

.factory_wrapper figure{
	padding-top: 80px;
	text-align: center;
}

.factory_wrapper .fadein_img_wrapper img{
	position: absolute;
	top: 100px;
	left: 150px;
}

**###

【実現したい内容】

HTMLのイメージマップに貼ってある各リンクをクリックすると、それに紐づいた画像がフェードインしてくる
ようにしたいです。

【困っている事】

イメージマップのリンクをクリックすると画像自体は表示されます。
しかし、jQueryのeachで全てのイメージマップのリンクとそれに紐づいた画像を取得しているため、
後からループされた要素に前の要素が上書きされてしまい、どのイメージマップのリンクをクリックしても
最後に取得した画像が表示されてしまいます。
ご回答よろしくお願いします。

Answer 1

    $('.area').on('click', function(event) {
        $('.fadein_img_wrapper img').eq($(this).index()).stop().fadeToggle();
    });

Comments

[Keichi_Negishi]

回答して頂いたコードを使用したところ、リンクと画像を紐づける事ができました。
大変助かりました。
ありがとうございます！