Изменение прозрачности картинки при наведении на другую ссылку
Похожая тема уже поднималась, но у меня конкретный вопрос.
Итак: Есть набор изображений, которые при наведении на них изменяют прозрачность с 80% на 100%. Есть набор ссылок, дублирующих эти изображения. Все объекты находятся в отдельных div-ах Задача: Сделать так, чтоб при наведении на ссылку 1 - изменялась прозрачность изображения 1, и т.д. Пример кода: <table width="100%" border="0"> <tr> <td> <a href="1.html">Ссылка1</a> <a href="2.html">Ссылка2</a> </td> <td> <div style="position:relative; "><img src="img/0.png" alt="" border="0"/> <div style="position:absolute; left:50px; top:50px; width:100; height:100; z-index:2; "><a href="1.html"><img class="object" src="img/1.png" width="100" height="100" title="Объект1" onmouseover="this.style.opacity=1;this.filters.alp ha.opacity=100" onmouseout="this.style.opacity=0.8;this.filters.al pha.opacity=80" /></a></div> <div style="position:absolute; left:200px; top:50px; width:100; height:100; z-index:3; "><a href="2.html"><img class="object" src="img/2.png" width="100" height="100" title="Объект2" onmouseover="this.style.opacity=1;this.filters.alp ha.opacity=100" onmouseout="this.style.opacity=0.8;this.filters.al pha.opacity=80" /></a></div> </td> </tr> </table> |
fess,
:) Может на джуквери сделать попроще ? ( " Это предлагаю |
Цитата:
|
А макет как выглядит? Может на css это проще будет сделать?
<div> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT22Ub6V5ZKEPwoT84tkKu-qaUEN0Vt1hWE8gBDjQgtFAIFYweo" /> <a href="//google.com">Google</a> </div> <div> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT22Ub6V5ZKEPwoT84tkKu-qaUEN0Vt1hWE8gBDjQgtFAIFYweo" /> <a href="//google.com">Google</a> </div> <style> body{ text-align: center; } div{ display: inline-block; position: relative; border: 1px solid gray; margin: 30px 15px 0; } a{ position: absolute; top: -25px; left: 0; width: 100%; } img{ opacity: 0.5; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } div:hover img{ opacity: 1; } </style> |
danik.js, можно высоту окна отображения регулировать :)
[HTML run height=300][/html] |
Цитата:
|
Часовой пояс GMT +3, время: 23:20. |