0

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!

Joey Morani
  • 25,431
  • 32
  • 84
  • 131

1 Answers1

4

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/

  • Only thing is that he wants to use an image, so you'll either have to set it as the background image for that class or actually change the selected image's source. – ryanulit Jul 19 '10 at 17:41
  • `@ryanulit` now, I understand what exactly he wants. Thanks for letting me know –  Jul 19 '10 at 17:52
  • Thanks! Although I couldn't get it to work with a background image. Any way to change an image's source from CSS? – Joey Morani Jul 19 '10 at 17:52
  • Thanks again. Just one last question now:- What do I do if there's other images on the same page which have been hyperlinked? The code seems to replace them images with the 'normal' or 'active' images. Is there a way to use something else other than "$('a').find('img')", as from my understanding (which is very little); that's looking for all images which are hyperlinks. – Joey Morani Jul 19 '10 at 20:30