Новости Joomla

Quantum Manager нужен сообществу, а автору нужна ваша поддержка!

Quantum Manager нужен сообществу, а автору нужна ваша поддержка!Файловый менеджер Quantum — одно...

Файловый менеджер Quantum — одно из самых популярных решений для Joomla, созданное разработчиком из сообщества Joomla, Дмитрием Цымбалом (@tsymbalmitia). Он делает Quantum удобным, безопасным и современным, обновляет его, исправляет уязвимости и отвечает пользователям — всё это в свободное от основной работы время.

Теперь настал момент для следующего шага: развитие проекта требует больше времени и ресурсов.

Русский язык для плагина N3T Cookie consent

Вставка VK VIDEO v.1.2.4 - плагин для Joomla

1   Вниз
0 Пользователей и 1 Гость просматривают эту тему.
  • 17 Ответов
  • 2855 Просмотров
*

iliya_art

  • Захожу иногда
  • 132
  • 7 / 0
Взаимосвязанные элементы
« : 24.01.2012, 08:43:32 »
Хочу сделать так чтобы при наведение на логотип сайта, изменялся логотип (это я умею) и вместе с ним изменялся элемент расположенный в шапке сайта (вот это я не знаю), чтобы они были в связке между собой.
На подобную тему в поисковиках ничего не нашел.
И вообще такое возможно с помощью CSS и PHP?
Записан
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Взаимосвязанные элементы
« Ответ #1 : 24.01.2012, 09:20:30 »
Ну на JS задача решается как два пальца. На CSS можно решить только разместив все изменяемые элементы внутрь элемента, на который наводите.
Например, вам необходимо, чтобы при наведении на лого, который в шапке менялся фон второго сверху модуля в левой колонке. Делаете так:
1. Создаёте слой с абсолютным позиционированием. Не забываете про z-index. Слой выше всех должен быть.
2. В него помещаете ваш лого. Позиционируете
3. Туда же помещаете позицию изменяемого модуля. Смещаете вниз и т.п. В общем, тоже позиционируете. Высоту модуля лучше поставить фиксированную.
4. В самой колонке делаете пробел на размер высоты модуля изменяемого.
Всё. Тогда будем иметь селлекторы вида:
Код: css
#trigger:hover #logo {}
#trigger:hover #mod_side {}
Записан
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Взаимосвязанные элементы
« Ответ #2 : 24.01.2012, 09:21:44 »
Да, чуть не забыл, для самого слоя, на который наводите, не забудьте явно указать ширину, высоту и оверфлоу:визибл!
Записан
*

iliya_art

  • Захожу иногда
  • 132
  • 7 / 0
Re: Взаимосвязанные элементы
« Ответ #3 : 24.01.2012, 11:03:40 »
Спасибо, как попробую отпишусь
У меня заказ на сайт фотостудии, в кратце я хотел чтобы при наведение на логотип студии он становился светлее, и одновременно загоралася вспышка расположенная сверху логотипа (менялась картинка вспышки)
Записан
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Взаимосвязанные элементы
« Ответ #4 : 24.01.2012, 11:07:58 »
Цитата: iliya_art от 24.01.2012, 11:03:40
Спасибо, как попробую отпишусь
У меня заказ на сайт фотостудии, в кратце я хотел чтобы при наведение на логотип студии он становился светлее, и одновременно загоралася вспышка расположенная сверху логотипа (менялась картинка вспышки)
Пожалуйста. Я бы на вашем месте в сторону JS лучше посмотрел:
http://jquery.page2page.ru/index.php5/Обработчик_события_hover
http://jquery.page2page.ru/index.php5/Поочередное_появление_и_скрытие_элементов
Записан
*

Efanych

  • Глобальный модератор
  • 4683
  • 644 / 0
  • Меняю свою жизнь на 360°!
Re: Взаимосвязанные элементы
« Ответ #5 : 24.01.2012, 11:15:54 »
Беграундом можна сделать
Цитировать
<div class="all"> <div class="logo"></div>  <div class="vspyshka"></div></div>
.vspyshka {position:absolute; background:url(1)}
.all:hover .vspyshka {background:url(2)}
Записан
Создание сайтов, шаблонов, помощь в решении проблем.
*

Pazys

  • Завсегдатай
  • 1738
  • 241 / 4
  • <a>А где я ошибся-то?</b>
Re: Взаимосвязанные элементы
« Ответ #6 : 24.01.2012, 11:16:17 »
Если не хотите JS делать, то лучше всего сделать CSS sprite.
Тоесть вам надо сделать 2 картинки - темную и светлую. И по событию hover менять background-position.
Для примера: www.myadministrator.ru справа сверху иконки. При наведении они меняют цвет.

Для чего именно спрайт, а не просто разные бэки - просто когда спрайт загрузится, то загрузятся сразу вся картинка (обе), и при наведении она сразу сменится на другую. Если использовать разные беки, то при наведении вторая картинка будет загружаться - что для неважного интернета будет очень заметно.
Записан
Ишак меня нюхал ...
Если помог - плюсуйте в карму.
*

Pazys

  • Завсегдатай
  • 1738
  • 241 / 4
  • <a>А где я ошибся-то?</b>
Re: Взаимосвязанные элементы
« Ответ #7 : 24.01.2012, 11:16:44 »
Цитата: Efanych от 24.01.2012, 11:15:54
Беграундом можна сделать.vspyshka {position:absolute; background:url(1)}
.all:hover .vspyshka {background:url(2)}

Не ... не надо так ... лучше спрайтом.
Записан
Ишак меня нюхал ...
Если помог - плюсуйте в карму.
*

Efanych

  • Глобальный модератор
  • 4683
  • 644 / 0
  • Меняю свою жизнь на 360°!
Re: Взаимосвязанные элементы
« Ответ #8 : 24.01.2012, 11:18:33 »
Ну да. Спрайтом 100%.
Записан
Создание сайтов, шаблонов, помощь в решении проблем.
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Взаимосвязанные элементы
« Ответ #9 : 24.01.2012, 11:39:35 »
Efanych, Pazys, всё верно советуете, спрайтом лучше и бэкграундом, если делать без js. Только это не решит задачи про то, что элементы находятся в разных областях сайта. Всё равно будет два решения: или разносить по сторонам внутри отдельного слоя, или вешать триггер js, тогда можно не заморачиваться с бэкграундами и разметкой.
Записан
*

Pazys

  • Завсегдатай
  • 1738
  • 241 / 4
  • <a>А где я ошибся-то?</b>
Re: Взаимосвязанные элементы
« Ответ #10 : 24.01.2012, 11:50:50 »
Ну это есесно. Если разные области, то надо скриптом, но все равно спрайтом. Пусть скрипт по ховеру на лого меняйт бэк-позишн. Причем еще будет супер если сделать короткое opacility (ваще краткое-краткое) при переходе с одного бека на другой.
Записан
Ишак меня нюхал ...
Если помог - плюсуйте в карму.
*

Efanych

  • Глобальный модератор
  • 4683
  • 644 / 0
  • Меняю свою жизнь на 360°!
Re: Взаимосвязанные элементы
« Ответ #11 : 24.01.2012, 11:55:49 »
Цитировать
Только это не решит задачи про то, что элементы находятся в разных областях сайта.
Но не настолько же разных, чтоб position:absolute не хватило
Цитировать
изменялся логотип (это я умею) и вместе с ним изменялся элемент расположенный в шапке сайта
Ну, разве что логотип не в шапке
Записан
Создание сайтов, шаблонов, помощь в решении проблем.
*

iliya_art

  • Захожу иногда
  • 132
  • 7 / 0
Re: Взаимосвязанные элементы
« Ответ #12 : 24.01.2012, 13:04:26 »
щас примерно начирикаю что я хочу, чтоб понятнее было
Записан
*

iliya_art

  • Захожу иногда
  • 132
  • 7 / 0
Re: Взаимосвязанные элементы
« Ответ #13 : 24.01.2012, 13:29:28 »
Сверху курсор не на логотипе, снизу курсор над логотипом

нехолось бы осветитель ставить над логотипом
Записан
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Взаимосвязанные элементы
« Ответ #14 : 24.01.2012, 14:19:17 »
Ну разметка будет такая:
<a id="logohover">
<img />
<div>
</a>
Для A пишем в CSS овефлоу:визибл, позишн:абсолют и жёско прописываем размеры равные размерам лого
Для A IMG пишем дисплей:блок
Для A DIV пишем позишн:релейтив и смещаем вправо.
Ну именяем бэграунды типа:
a:hover img {...}
a:hover div {...}
Записан
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Взаимосвязанные элементы
« Ответ #15 : 24.01.2012, 14:43:57 »
Как-то так:
Код: html4strict
<div id="header">
    <div id="logolink"><!-- на чё наводим -->
        <div id="logo"></div><!-- логотип -->
        <div id="lampa"></div><!-- светильнег -->
    </div>
</div>
Код: css
#header {position:relative;}
#logolink {position:absolute; width:200px; height:100px; overflow:visible; z-index:1; top:0; left:0;}

#logo {float:left; position:relative; top:50px; left:50px; width:100px; height:80px;
background:url(../logo.png left 0 no-repeat);}
#lampa {float: right; position:absolute; top:0; left:500px;
background:url(../lampa.png left 0 no-repeat);}

#logolink:hover #logo {background:url(../logo.png right 0 no-repeat);}
#logolink:hover #lampa {background:url(../lampa.png right 0 no-repeat);}
Записан
*

iliya_art

  • Захожу иногда
  • 132
  • 7 / 0
Re: Взаимосвязанные элементы
« Ответ #16 : 05.02.2012, 09:45:37 »
все получилось, по последнему совету от Shustry
спсибо за помощь!
Записан
*

Equilibrium07

  • Захожу иногда
  • 205
  • 8 / 1
Re: Взаимосвязанные элементы
« Ответ #17 : 05.02.2012, 10:35:11 »
<script>
JQuery(document).ready(function(){
JQuery('#logo').live('mouseOver',function(){
JQuery(this).css({'background':'бг который показывать при наведении'});
}); });
</script>
по мойму как-то так, правда live не когда не пользовался... но синтаксис по мойм такой.
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Расположить элементы без класса

Автор AlexB

 Ответов: 4
Просмотров: 1036 		Последний ответ 21.01.2021, 12:47:08
от AlexB
вывести элементы поверх остальных модулей

Автор lexxbry

 Ответов: 6
Просмотров: 2283 		Последний ответ 29.10.2017, 17:55:05
от lexxbry
Как правильно сдвинуть эти элементы не пойму?

Автор sprint007

 Ответов: 3
Просмотров: 1397 		Последний ответ 10.03.2015, 07:26:58
от AlekVolsk
Элементы компонента в CSS

Автор Arisha

 Ответов: 2
Просмотров: 1718 		Последний ответ 21.10.2009, 17:57:10
от Arisha
при наведении на кнопку прыгают элементы

Автор InJers

 Ответов: 1
Просмотров: 2489 		Последний ответ 29.08.2009, 17:46:50
от gdX