Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.01.2013, 20:07
Новичок на форуме
Отправить личное сообщение для fess Посмотреть профиль Найти все сообщения от fess
 
Регистрация: 26.01.2013
Сообщений: 4

Изменение прозрачности картинки при наведении на другую ссылку
Похожая тема уже поднималась, но у меня конкретный вопрос.
Итак:
Есть набор изображений, которые при наведении на них изменяют прозрачность с 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>
Ответить с цитированием
  #2 (permalink)  
Старый 26.01.2013, 20:33
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

fess,
Может на джуквери сделать попроще ? ( " Это предлагаю
Ответить с цитированием
  #3 (permalink)  
Старый 26.01.2013, 20:36
Новичок на форуме
Отправить личное сообщение для fess Посмотреть профиль Найти все сообщения от fess
 
Регистрация: 26.01.2013
Сообщений: 4

Сообщение от Deff Посмотреть сообщение
fess,
Может на джуквери сделать попроще ? ( " Это предлагаю
тут к сожалению я полный ноль
Ответить с цитированием
  #4 (permalink)  
Старый 26.01.2013, 23:14
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

А макет как выглядит? Может на 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, 27.01.2013 в 04:48.
Ответить с цитированием
  #5 (permalink)  
Старый 27.01.2013, 01:01
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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

[HTML run height=300][/html]
Ответить с цитированием
  #6 (permalink)  
Старый 27.01.2013, 10:07
Новичок на форуме
Отправить личное сообщение для fess Посмотреть профиль Найти все сообщения от fess
 
Регистрация: 26.01.2013
Сообщений: 4

Сообщение от danik.js Посмотреть сообщение
А макет как выглядит? Может на css это проще будет сделать?
А если ссылки и картинки в разных дивах?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрипт, при наведении на ссылку открывает 4 картинки Игорек Элементы интерфейса 7 01.09.2012 22:01
Отображение картинки большого размера при наведении на неё ira_lala Общие вопросы Javascript 3 21.04.2012 17:35
Эффект переворачивания картинки при наведении Tchort Элементы интерфейса 0 30.10.2011 14:47
Изменение стилей при клике на ссылку Avro Элементы интерфейса 2 11.04.2011 19:19
Изменение изображения при наведении на ссылку MDS Общие вопросы Javascript 1 08.08.2008 21:54