hover problem

hover problem

I'm trying to replace an image on hovered link, but for some reason it's not working.
my jQuery code:
$(document).ready(function() {
   $("#prev").hover(
      function() {$(this).attr({src: "assets/previous_active.gif"})},
      function() {$(this).attr({src: "assets/previous.gif"})}
   );
});

html code:
   <div id="container">
      <div id="large_image"><img src="<?php echo randomImage(); ?>" alt="large image" width="400" height="400" /></div>
      <ul>
         <li id="prev"><a href="#"><img src="assets/previous.gif" alt="previous" border="0" /></a></li>
      <?php
         for($i = 1; $i <= 3; $i++)
            echo "<li><img src='images/$i.jpg' width='100' height='100' border='0' /></li>\r\n";
      ?>
         <li id="next"><a href="#"><img src="assets/next.gif" alt="previous" border="0" /></a></li>
      </ul>
   </div>



To be more specific i'm trying to turn this:
<img src="assets/previous.gif" alt="previous" border="0" />

into this:
<img src="assets/previous_active.gif" alt="previous" border="0" />


Thanks for all the help