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 ue of a CMS in order to learn as much as possible as quickly as possible.

I am trying to make an imge 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.....