How to use both maplink and attr with jQuery?

I am planning to pop up img once I click image map, but a problem img doesn't appear is I don't know how to link map link to img that is hided on jQuery. For example, once I click <area shape="rect" coords="133,20,227,106" href="#tab2" alt="third"/>, pop up .big:eq(1) and hide .big:eq(0) and big:eq(2), once I click <area shape="rect" coords="133,110,227,200" href="#tab3" alt="second"/>, pop up .big:eq(2) and hide .big:eq(1) and .big:eq(0).

Please, advise me. I have never tried to change img on the same position with map link instead of going over other site with map link

$(document).ready(function(){
      $(".big").hide();
      $(".big:eq(0)").show();

      $(".small").hide();
      $(".small:eq(0)").show();
      //.big img:eq(1).show
   
      $("#maplink").bind("click focus",function(){
        $(".big:eq(1)").show();
      });
});

#tx p.img{ padding-top:40px; }
#tx p.big{ width:70%; padding-right:.5%; float:left; height:400px; }
#tx p.small{ width:23%; float:left; height:400px; }
#tx p img{ width:100%; height:100%; }

<p class="img big" id="tab1">
    <img src="images/img01.jpg"/>
</p>
<p class="img small" id="first">
    <img src="images/sub01.jpg" usemap="#maplink"/>
</p>
<p class="big" id="tab2">
    <img src="images/img02.jpg"/>
</p>
<p class="small" id="second">
    <img src="images/sub02.jpg" usemap="#maplink"/>
</p>
<p class="big" id="tab3">
    <img src="images/img03.jpg"/>
</p>    
<p class="small" id="third">
    <img src="images/sub03.jpg" usemap="#maplink"/>
</p>
<map id="maplink" name="maplink">
	<area shape="rect" coords="133,20,227,106" href="#tab2" alt="third"/>
	<area shape="rect" coords="133,110,227,200" href="#tab3" alt="second"/>
</map>