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:
- <script type="text/javascript">
- jQuery(function() {
- jQuery('#zoom_img').mouseover(function() {
- jQuery(this).attr('src', 'images/stories/k-o/zoom_over.png');
- });
- jQuery('#zoom_img').mouseout(function() {
- jQuery(this).attr('src', 'images/stories/k-o/zoom.png');
- });
-
-
- jQuery('#img_next').mouseover(function() {
- jQuery(this).attr('src', 'templates/k-o/images/right_over.png');
- });
- jQuery('#zoom_next').mouseout(function() {
- jQuery(this).attr('src', 'templates/k-o/images/right.png');
- });
-
-
- jQuery('#img_prev').mouseover(function() {
- jQuery(this).attr('src', 'templates/k-o/images/left_over.png');
- });
- jQuery('#zoom_prev').mouseout(function() {
- jQuery(this).attr('src', 'templates/k-o/images/left.png');
- });
- });
- </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.