Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Изменение прозрачности картинки при наведении на другую ссылку (https://javascript.ru/forum/dom-window/34976-izmenenie-prozrachnosti-kartinki-pri-navedenii-na-druguyu-ssylku.html)

fess 26.01.2013 20:07

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

Deff 26.01.2013 20:33

fess,
:) Может на джуквери сделать попроще ? ( " Это предлагаю

fess 26.01.2013 20:36

Цитата:

Сообщение от Deff (Сообщение 229565)
fess,
:) Может на джуквери сделать попроще ? ( " Это предлагаю

тут к сожалению я полный ноль

danik.js 26.01.2013 23:14

А макет как выглядит? Может на 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>

Deff 27.01.2013 01:01

danik.js, можно высоту окна отображения регулировать :)

[HTML run height=300][/html]

fess 27.01.2013 10:07

Цитата:

Сообщение от danik.js (Сообщение 229581)
А макет как выглядит? Может на css это проще будет сделать?

А если ссылки и картинки в разных дивах?


Часовой пояс GMT +3, время: 23:20.