Is is possible to have an image's rollover trigger a different active state for multiple images?

I would like to create a gallery of images but when one image is clicked on the other images will react to the one that is clicked.

http://thegoodgirlsnyc.com/test/test.html#

I'm failing to find an existing plugin, and I'm not sure where to start. Any pointers would be much 开发者_如何学Pythonappreciated.

Are you looking for something like this? You could substitue images for background colors if that's what you're trying to acheive.

http://jsfiddle.net/k4t434sispho3nix/Eb9as/1/

jQuery would lend itself excellently for this. You'd take a click listener on the images (One on the parent element might be better (Look for deferred listener if I get that term right)). Then you'd simply add a css class to all images except for the one clicked (Make sure you remove this class from the clicked image if it's there). If you need special styling on the clicked image, add another unique class to that.

After this you can just use a css template file to style the different elements.

From what you said in the original post, I believe you'd need something like this:

$("#clicked_div_id").click(function(){
   $("#top-left-box").attr("src", "top_right_himage.jpg")
   $("#bottom-right-box").attr("src", "bottom_right_himage.jpg");
});