How to change an image when clicked using JavaScript?

Question

I've created a sliding image viewer here . As you can see, there's 4 small clickable images to change/slide the image. I want the small image to change to this image alt text http://beta.d-load.org/images/etc/imagev-on.png when it's clicked, or when the appropriate main image is showing. That way the users can tell which main image is being shown. Can anyone maybe look at the source and explain how to do this? Thanks!

Answer 1

try the following code !!

var src = [];
    src['normal'] = "http://beta.d-load.org/images/etc/imagev-norm.png";
    src['active'] = "http://beta.d-load.org/images/etc/imagev-over.png";
$(document).ready(function() {
    $('a',$('.paging')).click(function() {
       $('a',$('.paging')).find('img').attr('src',src['normal']);  
       $(this).find('img').attr('src',src['active'])   ;
    });
});

Here you go, Demo : http://jsfiddle.net/qTB9g/