javascript - 別の要素でホバー時に画像を交換するJquery

Question

イメージ マップの領域にカーソルを合わせたときに、イメージ スワップを実行したいと考えています。コードは次のとおりです。

<div class="menu">
<img src="images/menu/menu_0.gif" alt="Navigation Menu" width="400" height="600" usemap="#Map" class="nav">
<map name="Map" class="mainnav">
  <area class="one" shape="rect" coords="23,61,255,110" href="#about">
  <area class="two" shape="rect" coords="215,154,342,201" href="#skills">
  <area class="three" shape="rect" coords="110,257,320,300" href="#education">
  <area class="four" shape="rect" coords="117,381,342,423" href="#experience">
  <area class="five" shape="rect" coords="171,485,359,536" href="#portfolio">
</map>
</div>

「.one」（または.two .threeなど）の領域にマウスを合わせると、「.nav」の画像のソースを「menu_1.gif」（およびそれぞれmenu_3.gif menu_4.gif）にスワップしたい。簡単な jquery スワップを試しましたが、同じ div (.nav 画像 src) 内のスワップの別の要素をターゲットにする方法がわかりません。私が見つけたすべての画像スワップは、セレクターとして「this」を使用しています。

私はこのjqueryから始めました：

jQuery(function(){
     $(".one").hover(
          function(){this.src = this.src.replace("_0","_1");},
          function(){this.src = this.src.replace("_1","_0");
     });
});

しかし、私が過去に試みたものはすべて暗闇で撮影しただけで、画像のソースを変更するための適切な要素を選択する方法がわからないため、何も機能しませんでした.