help with image rollovers please........

help with image rollovers please........

Hi, I am a comlete beginner to pretty much all things web design and am trying to construct my first website. I am attempting to hand code it without the use of a CMS. I am trying to make an image change on mouseover for my top nav menu, and have the following jQuery functions:

$(document).ready(function(){    
$(".navlist img").each(function) 
{    
rollsrc = $(this).attr("src");    
 
rollON = rollsrc.replace(/.jpg$/ig,"_link.png");  
$("<img>").attr("src",rollON);      
$(".navlist a").mouseover(function(){  });    
imgsrc= $(this).children("img").attr("src");    
matches = imgsrc.match(/_link.png);    
if (!matches) {      imgsrcON = imgsrc.replace(/.jpg$/ig,"_link.png");      
$(this).children("img").attr("src", imagesrcON);  
}    
$(".navlist a").mouseout(function(){      
$(this).children("img").attr("src", imgsrc);  
});    
}); 

my html is as follows:

<div id="nav">       
<ul class="navmenu">
<li><a href="index.html"><img class="swap" src="images/links/home.jpg" alt="Home" border="none"></a></li>        
<li><a href="#"><img class="swap" src="images/links/ourbar.jpg" alt="Our Bar" border="none"></a>          
<ul class="navdrop">          
<li ><a href="#"><img class="swap" src="images/links/cockteles.jpg"  alt="Our Cocktails" border="none"></a></li>
<li ><a href="#"><img class="swap" src="images/links/celebrate.jpg" alt="Celebrate in Style" border="none"></a></li>
</ul></li>
<li><a href="#"><img class="swap" src="images/links/ourcigars.jpg" alt="Our Cigars" border="none"></a>          
<ul class="navdrop"> 
<li><a href="#"><img class="swap" src="images/links/edicionlimitadas.jpg" alt="Edition Limitadas" border="none"></a></li>
<li><a href="our_cigars.html"><img class="swap" src="images/links/cigartasting.jpg" alt="Cigar Tastings" border="none"></a></li>          
</ul>         
</li>        
<li><a href="#"><img class="swap" src="images/links/personalcigar.jpg" alt="Personal Cigar Roller" border="none"></a></li>       
<li><a href="our_cigars.html"><img class="swap" src="images/links/photogallery.jpg" alt="Photo Gallery" border="none"></a></li>        
<li><a href="#"><img class="swap" src="images/links/contactus.jpg" alt="Contact Us" border="none"></a></li>  </ul></div></div>
<!--end banner--> 
the image src for the alt image is in the form eg."images/links/home_link.png" and is the same for every image. I have checked this and checked this, could some body please give me a pointer as to where I am going wrong? Or a pointer to a tutorial for this effect? I have looked at a few and this seems to be the best for what I am attempting, but as I said I don't really know what I'm doing so any advice gratefully received.....
 
Oh ,and I realise that the jQuery references ".navlist" and not ".navmenu" however the first script on my page changes the class of ".navmenu" to ".navlist" this is to ensure that my drop down menu's still function without Javascript, I have an alternate css menu system ref'd as ".navmenu".