I have a page that has a large image on it with a number of thumbnails. When you mouse over a thumbnail the main image changes to the image you have just rolled your mouse over. The problem is the more thumbnails I have, the more repeated code I have. How could I reduce it?

The Jquery code is as follows.

<script type="text/javascript">  
    $('#thumb1')
.mouseover(function(){  
$('#big_img').fadeOut('slow', function(){  
$('#big_img').attr('src', '0001.jpg');  
$('#big_img').fadeIn('slow');  
            });  
        });  
    $('#thumb2')  
        .mouseover(function(){  
            $('#big_img').fadeOut('slow', function(){  
                $('#big_img').attr('src', 'p_0002.jpg');  
                $('#big_img').fadeIn('slow');  
            });  
        });  
     $('#thumb3')  
        .mouseover(function(){  
    $('#big_img').fadeOut('slow', function(){  
                $('#big_img').attr('src', '_img/p_0003.jpg');  
                $('#big_img').fadeIn('slow');  
            });  
        });  
     $('#thumb4')  
        .mouseover(function(){  
            $('#big_img').fadeOut('slow', function(){  
                $('#big_img').attr('src', '0004.jpg');  
                $('#big_img').fadeIn('slow');  
            });  
        });  
</script>

#big_img = the ID of the full size image

#thumb1, #thumb2, #thumb3, #thumb4 = The ID's of the thumbnails

The main code for the page is PHP if that helps.