changing background image

changing background image

Hello all,

I can't understand why this is not working. I want the background-image to change when you click on certain elements.

CSS
#imageCrop {
   background-image: url(bg2.jpg);
   position: absolute;
   z-index: 0;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   overflow: hidden;}

#fullBG {
   position: relative;
   height: 100%;
   width: 100%;
   visibility: hidden;}
   
#image-one{
   border: none;}

#image-two{
   border: none}


HTML/jQuery:

<script type="text/javascript" src="jquery-1.3.1.js"></script>

<script type="text/javascript">

$('td#image-one').click(function(){
   $('#imageCrop').css('backgroundImage','url('bg3.jpg')');
})

$('td#image-two').click(function(){
   $('#imageCrop').css('backgroundImage','url('bg2.jpg')');
})



</script>

</head>

<body>





   <table class="subNav" cellpadding="8px" cellspacing="5px" border="0px">
      
      <tr>
         <td id="image-one">
         <img src="test.gif">
         </td>
         
         <td id="image-two">
         <img src="test2.gif">      
         </td>


Any ideas?

--TSG