how can i get right jQuery image swap code?

how can i get right jQuery image swap code?

hello every one,
i am trying to get each image loaded into div while mouse over but it does not work. jQuery is new for me
what is wrong with jQery code i have no idea could you help please.
here is the code.


<title>Untitled Document</title>
<style type="text/css">
#gallery  li {
 display: inline;
 margin-right: 3px;
}
#gallery #main-img {
background: url(2.jpg) no-repeat 0 0;
 padding: 26px;
}








</style>
<script language="javascript" >
$(document).ready(function() { 
   // Image swap on hover
 $("#gallery li img").hover(function(){      
 $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
  
});

</script>
</head>
<body>
<div id="gallery">
    <img src="gallery/img_1.jpg" alt="" id="main-img" />
        <ul>  
            <li><img src="gallery/thumb/img_1.jpg" alt="" /></li> 
            <li><img src="gallery/thumb/img_3.jpg" alt="" /></li>
            <li><img src="gallery/thumb/img_4.jpg" alt="" /></li>   
            <li><img src="../gallery/thumb/img_5.jpg" alt="" /></li>      
            </ul>
             </div>
</body>
</html>