Javascript/CSS — apply css style on clicking unrelated element

Question

Javascript newbie question: I have a css image gallery utilising anchors in an unordered list:

<div id="gallery">
<ul id="gallery-interior">

<li id="one"><img src="../images/intro.jpg" usemap="#gallerymap"><map name="gallerymap">
<area shape="circ" coords="429,157,30" href="#two"></li>

<li id="two"><img src="../images/detail.jpg" usemap="#gallerymap_2"><map name="gallerymap_2">
<area shape="circ" coords="50,157,30" href="#one">
<area shape="circ" coords="429,157,30" href="#three"></li>

</ul>
</div>


#gallery {
width: 484px;
overflow: hidden;
height: 410px;
}

#gallery-interior {
overflow-y: hidden;
}

#gallery-interior li {
width: 484px;
height: 410px;
}

This gallery has thumbnails beneath that reference the anchors in the list to select images individually:

<div class='thumbs'>
<a href="#one"><img src="../images/intro_thumb.jpg"></a>
<a href="#two"><img src="../images/detail_thumb.jpg"></a>
</div>

These thumbs are styled to change on selection:

.thumbs a:active img,
.thumbs a:focus img,
{
opacity:0.65;
-moz-opacity:0.65;
filter:alpha(opacity=65;
)

The thumbs respond to selection by changing opacity, but I'd like them to also change in response to clicking the links in the list, ie, clicking <a href="#two"> at <li id="one"> would cause 'detail_thumb.jpg' to become opaque.

Is there a simple javascript solution to applying the '.thumbs a:active/focus img' class when clicking the list links ('<li id="one"><a href="#two"><img src="../images/intro.jpg">'</a>'</li>')? Css would be preferable, but combinators are apparently not applicable due to the lack of any dependencies between the gallery and the thumbnails (and an absolutely-positioned solution is undesirable).

If you feel that you can answer this question then please provide a coded example of your solution, as I have asked this question previously and only received continuous prose comments regarding a possible js direction and I am a stated newbie!

Thanks for any assistance

Answer 1

Presuming that the LI's are always going to match the ahrefs with imgs, all you have to do is attach a click event to the list items that "does stuff" to the matching img. See

http://jsbin.com/bujayuku/1/

When you click #n in the list, do stuff to #n in the thumbs div.