jQuery Forum

hello all,
in my site i have 3 image buttons to which i want to apply a rollover effect.
i wrote a short script with help of members of this forum and it looks like this:

1. <script type="text/javascript">
2.  jQuery(function() {
3.        jQuery('#zoom_img').mouseover(function() {
4.              jQuery(this).attr('src', 'images/stories/k-o/zoom_over.png');
5.        });
6.        jQuery('#zoom_img').mouseout(function() {
7.              jQuery(this).attr('src', 'images/stories/k-o/zoom.png');
8.        });
9.       
10.       
11.        jQuery('#img_next').mouseover(function() {
12.              jQuery(this).attr('src', 'templates/k-o/images/right_over.png');
13.        });
14.        jQuery('#zoom_next').mouseout(function() {
15.              jQuery(this).attr('src', 'templates/k-o/images/right.png');
16.        });
17.       
18.       
19.        jQuery('#img_prev').mouseover(function() {
20.              jQuery(this).attr('src', 'templates/k-o/images/left_over.png');
21.        });
22.        jQuery('#zoom_prev').mouseout(function() {
23.              jQuery(this).attr('src', 'templates/k-o/images/left.png');
24.        });
25.  });
26. </script>

my problem is that in my site, only the rollover for the first image works. the other two have a problem with the "mouseout" line.

you can take a look at an example page here. under the picture you will find a small navigation menu with "fwd" "prev" and "zoom" buttons. the effect only works on "zoom" while the others change on "mouseover" but don't change back on "mouseout".
i cannot figure out why.
can someone tell?

thank you all.