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!
Add a comment
|
1 Answer
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/
4 Comments
ryanulit
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.
Joey Morani
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
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.