<div class="wrap">

    <div id="gallery">

    

    <ul>

      <li><img src="gallery/thumb/img_1.jpg"/></li>

      <li><img src="gallery/thumb/img_2.jpg"/></li>

    </ul>

    <img src="gallery/img_1.jpg" alt="" id="main-img" />

</div>

<div id="rectangle"></div>

<div id="rectangle2"></div>

</body>

<footer>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/JavaScript">

// prepare the form when the DOM is ready 

$(document).ready(function() {

    $("#gallery li img").hover(function(){

        $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));

    });

    var imgSwap = [];

     $("#gallery li img").each(function(){

        imgUrl = this.src.replace('thumb/', '');

        imgSwap.push(imgUrl);

    });

    $(imgSwap).preload();

});

$.fn.preload = function() {

    this.each(function(){

        $('<img/>')[0].src = this;

    });

}

</script>

------

You can see it on my site here: www.tdsjr82.com

 I'd like the thumbnails to fill the size of the borders around them, or to simply be able to border the thumbnails themselves. 

Any help, much appreciated.