Javascript newbie question: у меня есть галерея изображений css, использующая якоря в неупорядоченном списке:
<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;
}
В этой галерее есть миниатюры под этой ссылкой для привязки в списке для выбора изображений по отдельности:
<div class='thumbs'>
<a href="#one"><img src="../images/intro_thumb.jpg"></a>
<a href="#two"><img src="../images/detail_thumb.jpg"></a>
</div>
Эти большие пальцы стилизованы для изменения при выборе:
.thumbs a:active img,
.thumbs a:focus img,
{
opacity:0.65;
-moz-opacity:0.65;
filter:alpha(opacity=65;
)
Большие пальцы отвечают на выбор, изменяя непрозрачность, но я бы хотел, чтобы они также изменились в ответ на щелчок по ссылкам в списке, т.е. Нажав <a href="#two"> на <li id = "one"> вызвать 'detail_thumb.jpg', чтобы стать непрозрачным.
Есть ли простое решение javascript для применения класса ".thumbs a: active/focus img" при нажатии ссылок на список ('<li id = "one"> <a href="#two"> <img src= "../images/intro.jpg ">" </a> </li> ')? Css предпочтительнее, но комбинаторы, по-видимому, не применимы из-за отсутствия каких-либо зависимостей между галереей и эскизами (и абсолютно позиционированное решение нежелательно).
Если вы чувствуете, что можете ответить на этот вопрос, пожалуйста, предоставьте кодированный пример вашего решения, так как я задал этот вопрос ранее и получил только непрерывные прозаические комментарии относительно возможного направления js, и я заявляю новичку!
Спасибо за любую помощь
Предполагая, что LI всегда будет соответствовать ahrefs с imgs, все, что вам нужно сделать, - это присоединить событие click к элементам списка, которые "на самом деле" соответствуют соответствующему img. Видеть
Когда вы нажимаете #n в списке, делайте материал в #n в div с большими пальцами.