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

20dollars

  • Захожу иногда
  • 235
  • 4 / 2
Вопрос по верстке
« : 22.01.2014, 00:29:22 »
Имеется подобная структура:
Код
<div class="general">
   <div class="baner">
      <img src="img1.jpg" class="img1">
      <img src="img2.jpg" class="img2">
   </div>
   <div class="button">
      <a href=# class="but">кнопка</a>
   </div>
</div>
Задача такова, что по-умолчанию img.img2 не отображается (display:none) а при наведении курсора на a.but должна включаться (display:block) а img.img1 наоборот (display:none)
PS: вложить img.img1 и img.img2 в div.button не вариант, div.baner - отдельный модуль и будет выводиться только на главной.
Может скрипток какой навесить, присвоить картинкам id? В кодинге не силен, помогите
*

Shustry

  • Гуру
  • 6436
  • 744 / 3
Re: Вопрос по верстке
« Ответ #1 : 22.01.2014, 00:45:53 »
Если поменять местами кнопку и блок с баннером, то можно применить сестринский селектор:

Код: html4strict
<div class="general">
   <div class="button">
      <a href=# class="but">кнопка</a>
   </div>
   <div class="baner">
      <img src="img1.jpg" class="img1">
      <img src="img2.jpg" class="img2">
   </div>
</div>

Код: css
.img1 {display:none;}
.img2 {display:block;}
.button:hover + .baner .img1 {display:block;}
.button:hover + .baner .img2 {display:none;}
*

20dollars

  • Захожу иногда
  • 235
  • 4 / 2
Re: Вопрос по верстке
« Ответ #2 : 22.01.2014, 01:08:29 »
Цитировать
...
.button:hover + .baner .img1 {display:block;}
...
Не будет работать, только если так: .button:hover + .baner {display:block;} вложенность классов не поддерживается насколько я понял, и оба элемнта должны иметь одного родителя
В рабочем варианте структура малость сложнее, переставить блоки местами вряд ли получится. Вот пациент: http://f5-studio.com/goldenjoker/index.html
При наведении курсора на иконки под баннером, картинка баннера должна меняться. Сейчас она одна, но задумывается вставить несколько
« Последнее редактирование: 22.01.2014, 01:23:52 от 20dollars »
*

Shustry

  • Гуру
  • 6436
  • 744 / 3
Re: Вопрос по верстке
« Ответ #3 : 22.01.2014, 01:14:53 »
Ну если подключить jq, то всё просто становицо. Можно также на клик повесить.
*

20dollars

  • Захожу иногда
  • 235
  • 4 / 2
Re: Вопрос по верстке
« Ответ #4 : 22.01.2014, 01:20:38 »
вот если можно с этого места подробнее  ::)
*

Shustry

  • Гуру
  • 6436
  • 744 / 3
Re: Вопрос по верстке
« Ответ #5 : 22.01.2014, 01:23:56 »
Структура так будет выглядеть?
Код: html4strict

<!--баннеры-->
<div class="baner">
<img src="images/img.jpg">
<img src="images/img.jpg">
<img src="images/img.jpg">
<img src="images/img.jpg">
<img src="images/img.jpg">
<img src="images/img.jpg">
</div>

<!--кнопки-->
<div class="icon-games">
<div class="gj-wrapper">           
<div class="game">
<a href="#"><img class="rrr" src="images/icon-games/blackjack.png">Блек джек</a>
</div>
<div class="game">
<a href="#"><img src="images/icon-games/poker.png">Покер</a>
</div>
<div class="game">
<a href="#"><img src="images/icon-games/roulet.png">Рулетки</a>
</div>
<div class="game">
<a href="#"><img src="images/icon-games/lotery.png">Лотереи</a>
</div>
<div class="game">
<a href="#"><img src="images/icon-games/automats.png">Игровые автоматы</a>
</div>
<div class="game">
<a href="#"><img src="images/icon-games/diller.png">Диллер</a>
</div>
<br clear="all">
</div>
</div>
*

20dollars

  • Захожу иногда
  • 235
  • 4 / 2
Re: Вопрос по верстке
« Ответ #6 : 22.01.2014, 01:28:18 »
Структура так будет выглядеть?
Да, вы все правильно поняли
*

Shustry

  • Гуру
  • 6436
  • 744 / 3
Re: Вопрос по верстке
« Ответ #7 : 22.01.2014, 01:34:06 »
Код: javascript
var btns = jQuery('.gj-wrapper div');
var bnrs = jQuery('.baner img');

jQuery(btns).each(function(idx,el){
jQuery(el).click(function(){
jQuery(bnrs).eq(idx).show().siblings().hide();
})
});

Ссылки можете удалить, они лишние. Т.е. так достаточно:

Код: html4strict
<!--баннеры-->
<div class="baner">
<img src="images/img.jpg">
<img src="images/img.jpg">
<img src="images/img.jpg">
<img src="images/img.jpg">
<img src="images/img.jpg">
<img src="images/img.jpg">
</div>

<!--кнопки-->
<div class="icon-games">
<div class="gj-wrapper">           
<div class="game">
<img class="rrr" src="images/icon-games/blackjack.png">Блек джек
</div>
<div class="game">
<img src="images/icon-games/poker.png">Покер
</div>
<div class="game">
<img src="images/icon-games/roulet.png">Рулетки
</div>
<div class="game">
<img src="images/icon-games/lotery.png">Лотереи
</div>
<div class="game">
<img src="images/icon-games/automats.png">Игровые автоматы
</div>
<div class="game">
<img src="images/icon-games/diller.png">Диллер
</div>
<br clear="all">
</div>
</div>
*

20dollars

  • Захожу иногда
  • 235
  • 4 / 2
Re: Вопрос по верстке
« Ответ #8 : 22.01.2014, 01:46:14 »
создал js файл, прикрутил его к странице, ссылки убрал, добавил картинки. чего-то нехватает, не работает (((  :'(
*

Shustry

  • Гуру
  • 6436
  • 744 / 3
Re: Вопрос по верстке
« Ответ #9 : 22.01.2014, 01:46:45 »
А jQuery где? :)

И скрипт надо так тогда делать:
Код: javascript
jQuery(document).ready(function(){

var btns = jQuery('.gj-wrapper div');
var bnrs = jQuery('.baner img');
 
jQuery(btns).each(function(idx,el){
jQuery(el).click(function(){
jQuery(bnrs).eq(idx).show().siblings().hide();
})
});
 

});
*

20dollars

  • Захожу иногда
  • 235
  • 4 / 2
Re: Вопрос по верстке
« Ответ #10 : 22.01.2014, 01:49:12 »
ну вот, добавил <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
*

Shustry

  • Гуру
  • 6436
  • 744 / 3
Re: Вопрос по верстке
« Ответ #11 : 22.01.2014, 01:51:18 »
Код: javascript
$(document).ready(function(){
 
var btns = $('.gj-wrapper div');
var bnrs = $('.baner img');
 
$(btns).each(function(idx,el){
$(el).click(function(){
$(bnrs).eq(idx).show().siblings().hide();
})
});
 
 
});
*

20dollars

  • Захожу иногда
  • 235
  • 4 / 2
Re: Вопрос по верстке
« Ответ #12 : 22.01.2014, 01:52:55 »
заменил, все равно не контачит (
*

Shustry

  • Гуру
  • 6436
  • 744 / 3
Re: Вопрос по верстке
« Ответ #13 : 22.01.2014, 01:59:04 »
JQ-то надо ДО своих сочинительств подключать. Понятно, что ошибка. Сперва подключили скрипт мой, потом подключаете джей, на котором скрипт уже какбэ отработал. :)
Всё проверил, всё работает. Дальше с вёрсткой разбирайтесь.
*

20dollars

  • Захожу иногда
  • 235
  • 4 / 2
Re: Вопрос по верстке
« Ответ #14 : 22.01.2014, 08:44:38 »
Поправил, действительно работает. Изменил в вашем скрипте click на hover и поправил CSS, теперь то, что нужно. А можно ли, чтобы при отведении курсора от кнопок снова первая картинка становилась по-умолчанию?
PS: Что получилось: http://f5-studio.com/goldenjoker/index.html
« Последнее редактирование: 22.01.2014, 09:40:08 от 20dollars »
*

Shustry

  • Гуру
  • 6436
  • 744 / 3
Re: Вопрос по верстке
« Ответ #15 : 22.01.2014, 11:42:19 »
Код: javascript
var btns = $('.gj-wrapper div');
var bnrs = $('.baner img');

$(btns).each(function(idx,el){
$(el).hover(
function(){
$(bnrs).eq(idx).show().siblings().hide();
},
function(){
$(bnrs).first().show().siblings().hide();
});
});

});
*

20dollars

  • Захожу иногда
  • 235
  • 4 / 2
Re: Вопрос по верстке
« Ответ #16 : 22.01.2014, 12:30:07 »
Ага, неплохо. Вот только там 6 кнопок, соответствующие 6-ти картинкам и 7-я - дэфолтная. А тут дэфолтная привязывается сразу первой кнопке. Разве что создать еще одну кнопку вначале и спрятать её стилями но это не совсем корректно
« Последнее редактирование: 22.01.2014, 12:35:12 от 20dollars »
*

Shustry

  • Гуру
  • 6436
  • 744 / 3
Re: Вопрос по верстке
« Ответ #17 : 22.01.2014, 12:41:49 »
Не понял проблемы.
*

20dollars

  • Захожу иногда
  • 235
  • 4 / 2
Re: Вопрос по верстке
« Ответ #18 : 22.01.2014, 12:51:25 »
По-умолчанию должна отображаться картинка №0 - дэфолтная, резкая. Остальные скрыты. При наведении курсора на кнопку №1 картинка №0 заменяется на картинку №1 (размытая, с акцентом на соответствующую кнопке область рисунка). При отведении курсора от кнопки снова появляется дэфолтная картинка №0. И аналогично следующие 5 кнопок.
А в вашем решении дэфолтная картинка №0 сразу соответствует кнопке №1. То есть первая кнопка не активная. Далее второй кнопке соответствует картинка №1, третей - картинка №2 и тд. сдвиг на 1 позицию.
Я сейчас создал еще один пустой div кнопки и стилями установил ему нулевою ширину, чтобы на странице он не был виден. Теперь получается 7 кнопок и 7 картинок. дэфолтная присваивается первой кнопке, которая визуально отсутствует, но это уже кулибничество ))
*

20dollars

  • Захожу иногда
  • 235
  • 4 / 2
Re: Вопрос по верстке
« Ответ #19 : 22.01.2014, 13:34:28 »
И, кстати, после выполнения скрипта в IE некорректно стили отображаются. Это с самим скриптом связано?
*

20dollars

  • Захожу иногда
  • 235
  • 4 / 2
Re: Вопрос по верстке
« Ответ #20 : 22.01.2014, 15:59:33 »
Стили поправил, получилось именно то, что и требовалось. Огромное спасибо Shustry, + в репу!  *DRINK*
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Вопрос по настройке новостной ленты на главной странице сайта

Автор sect

Ответов: 0
Просмотров: 684
Последний ответ 18.09.2017, 02:52:01
от sect
Вопрос по текстовому редактору Joomla 2.5

Автор tim33

Ответов: 16
Просмотров: 1190
Последний ответ 22.06.2017, 13:39:31
от Pandorik
Вопрос по оформлению текста

Автор ORTODOX

Ответов: 13
Просмотров: 1507
Последний ответ 27.01.2017, 19:20:42
от OgloblYa
Вопрос по пользователям

Автор jess

Ответов: 7
Просмотров: 802
Последний ответ 10.02.2016, 11:44:10
от jess
Вопрос по базе данных

Автор mnogoto4ka

Ответов: 2
Просмотров: 935
Последний ответ 03.04.2015, 11:14:27
от mnogoto4ka