Question

I’ve got an image subdivided into map area. When you click on an area, the color (image’s src) for that particular area changes, all thanks to javascript (jquery). So far so good.
But I also have a second different image containing “mirror areas”, which have to change too when I click on the corresponding area in the first image. It can be either one or two mirror areas in the second image (and of course, I have to do it both sides).

The question is, can I “link” those areas so that when I click on one, I can change the mirror images’ src ? (get its attributes, its id, or whatever that’ll allow me to change it)

Thanks !

Answer 1

if each corresponding area that you want mapped has the same class you should be able to do it easily.

if you had 2 images that you wanted to mirror

<img class="area1" ...>
<img class="area1" ...>

<img class="area2" ...>
<img class="area2" ...>

Then you could have something like

$("img").click(function(){
   //Select all elements with this class and add a border for example
   $("."+$(this).attr("class")).css("border","1px solid red");
});

Not sure if this helps