HELP

HELP

Hello, there i have just started learning jQuery .. Basically I'm trying to implement   if when i hover over an link on the navigation menu ,i want to change the image in the above div according to the button/list hovered .. 

I'm Not getting what to do next ..i want to show the image name that was caught using the text() method and hide the rest ..

here is the code 

  2. <body>

  4. <div id="container">
  5.     <figure>
  6.         <ul>
  7.             <li><img src="IMG/Cricket.jpg"/></li>
  8.             <li><img  class="hide" src="IMG/EPL.jpg"/></li>
  9.             <li><img class="hide" src="IMG/Formula 1.jpg"/></li>
  10.             <li><img class="hide" src="IMG/Golf.jpg"/></li>
  11.             <li><img  class="hide" src="IMG/Tennis.jpg"/></li>
  12.         </ul>
  13.     </figure>
  14.     
  15.     <nav>
  16.         <ul>
  17.             <li><a href="#">Cricket</a></li>
  18.             <li><a href="#">EPL</a></li>
  19.             <li><a href="#">Formula 1</a></li>
  20.             <li><a href="#">Golf</a></li>
  21.             <li><a href="#">Tennis</a></li>
  22.         </ul>
  23.     </nav>
  24. </div>
  25. <script src="js/jQuery.js"></script>
  26. <script>
  27.     
  28.       (function(){
  29.         
  30.            var Img=$('li img');
  31.            
  32.             Img.hide().eq(0).show();
  33.             
  34.             var hov=$('nav ul li a');
  35.             
  36.              hov.hover(function(){
  37.                 
  38.                     var $this=$(this);
  39.                     var imgname=$('nav ul li a').text();
  40.                  
  41.                   //alert("clicked on nav button");
  42.                   Img.attr('src','IMG/'+imgname+'.jpg');
  43.                    
  44.                    
  45.                    
  46.                   
  47.                 })
  48.         
  49.         })();
  50.     
  51. </script>
  52. </body>