Изменение прозрачности картинки при наведении на другую ссылку
Похожая тема уже поднималась, но у меня конкретный вопрос.
Итак: Есть набор изображений, которые при наведении на них изменяют прозрачность с 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, время: 00:18. |