商品サムネイル画像にマウスを乗せるとメイン写真が切り替わる

⇒実際の動作ページはこちら

プログラムはこちら。
もっと良い書き方があったら教えてくださいm(_ _)m

<style type="text/css">
    #mainImage img{
        height:300px;
    }
    div#imageList ul {
        margin: 10px;
        padding: 0;
    }
    div#imageList li {
        float: left;
        list-style-type: none;
        margin-left: 5px;
    }
    div#imageList li img {
        width: 50px;
        height: 50px;
    }
    </style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
     $('#imageList img').hover(function(){
        $('#mainImage img').attr('src', $(this).attr('src')); 
        $('#mainImage img').wrap($('<a>').attr('href',$(this).attr('src')));
    }); 
});
</script>

<div id="base">

    <div id="mainImage">
        <img src="sample1.jpg"/>
    </div>
 
    <div id="imageList">
        <ul>
            <li><img src="sample1.jpg"></li>
            <li><img src="sample2.jpg"></li>
            <li><img src="sample3.jpg"></li>
            <li><img src="sample4.jpg"></li>
            <li><img src="sample5.jpg"></li>
        </ul>
    </div>
</div>