Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.07.2010, 17:25
Аспирант
Отправить личное сообщение для pavdin Посмотреть профиль Найти все сообщения от pavdin
 
Регистрация: 01.07.2010
Сообщений: 49

Как при наведении на ссылку отображать объекты под классом visibility: hidden;
Есть
<DIV id="smile" class="notOfficial"></DIV>
<DIV id="tabletWithChips" class="notOfficial"></DIV>
<DIV id="cigarettes" class="notOfficial"></DIV>
<DIV id="ashTray" class="notOfficial"></DIV>
<DIV id="beer" class="notOfficial"></DIV>
<DIV id="magazinesPorno" class="notOfficial"></DIV>
<DIV id="notepadPorno" class="notOfficial"></DIV>


В css прописано
#header .notOfficial { visibility: hidden; }

Как при наведении на определённую ссылку на странице отображать скрытые блоки средствами javascript
Ответить с цитированием
  #2 (permalink)  
Старый 01.07.2010, 17:37
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

Так же, использовать css.

<style>
#header .notOfficial { visibility: hidden; }
#header.showNotOficcial .notOfficial { visibility: visible; }
</style>
<div id="header">
	<DIV id="smile" class="notOfficial">Smile</DIV>
	<DIV id="tabletWithChips" class="notOfficial">Tablet With Chips</DIV>
	<DIV id="cigarettes" class="notOfficial">Cigarettes</DIV>
	<DIV id="ashTray" class="notOfficial">Ash Tray</DIV>
	<DIV id="beer" class="notOfficial">Beer</DIV>
	<DIV id="magazinesPorno" class="notOfficial">Porn Zines</DIV>
	<DIV id="notepadPorno" class="notOfficial">Porn Pad</DIV>
</div>

<a href="javascript://" onmouseover="document.getElementById('header').className = 'showNotOficcial'" onmouseout="document.getElementById('header').className = ''">Блекджек и шлюхи</a>


Лучше, конечно, использовать addClass и removeClass, но для примера, думаю, пойдет.
Ответить с цитированием
  #3 (permalink)  
Старый 01.07.2010, 17:48
Аспирант
Отправить личное сообщение для pavdin Посмотреть профиль Найти все сообщения от pavdin
 
Регистрация: 01.07.2010
Сообщений: 49

Спасибо огромное, работает... осталось только решить, как
при наведении на эту же ссылку, пропадали объекты
под class="official"???

<A id="notepad" class="official" href="#" title="#"></A>
<A id="camera" class="official" href="#" title="#"></A>
Ответить с цитированием
  #4 (permalink)  
Старый 01.07.2010, 17:51
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

#header .notOfficial { visibility: hidden; } 
#header.showNotOficcial .notOfficial { visibility: visible;} 
#header.showNotOficcial .official { visibility: hidden;}


И мой Вам совет: учите css. Это Вам очень поможет в разработке.
Ответить с цитированием
  #5 (permalink)  
Старый 01.07.2010, 17:58
Аспирант
Отправить личное сообщение для pavdin Посмотреть профиль Найти все сообщения от pavdin
 
Регистрация: 01.07.2010
Сообщений: 49

Получилось.... Спасибо огромное....

Вот промер того, что я хотел.... Нажимаешь на логотип и .... . Супер....
А реально сделать, чтобы картинки, которые подменяются, подменялись плавно туда и обратно?
Ответить с цитированием
  #6 (permalink)  
Старый 01.07.2010, 17:59
Аспирант
Отправить личное сообщение для pavdin Посмотреть профиль Найти все сообщения от pavdin
 
Регистрация: 01.07.2010
Сообщений: 49

http://cp769028.cpanel.tech-logol.ru...ec/gaz-vrn.htm
Ответить с цитированием
  #7 (permalink)  
Старый 01.07.2010, 18:03
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

pavdin, не дублируйте сообщения
Ответить с цитированием
  #8 (permalink)  
Старый 01.07.2010, 19:10
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

В аттаче пример. Из-за data-url он большой.
В тех браузерах, которые уже понимают css transitions, смена будет плавной. В остальных — резкой.
Вложения:
Тип файла: zip index.zip (8.1 Кб, 11 просмотров)
Ответить с цитированием
  #9 (permalink)  
Старый 02.07.2010, 15:18
Аспирант
Отправить личное сообщение для pavdin Посмотреть профиль Найти все сообщения от pavdin
 
Регистрация: 01.07.2010
Сообщений: 49

Спасибо большое!!!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подмена кода php include при наведении на ссылку pavdin Общие вопросы Javascript 29 01.07.2010 18:21
Смена картнок при наведении на ссылку (для новостей) vinnie Общие вопросы Javascript 30 03.06.2010 15:16
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 23:24
Появление текста при наведении курсора на ссылку Александра Элементы интерфейса 1 11.05.2009 00:22
Как изменить текст при наведении курсора? sewernik Элементы интерфейса 2 13.04.2009 19:31