Форум Сайтостроение Веб-строительство

Как подобное реализовать? (Смена картинки при нажатии)

Andy HaRd
На сайте с 06.02.2015
Offline
39
Andy HaRd
998

Переходим на smotra(точка)ru

Вверху видим кнопочку переключения CSS

Как реализовать такое-же:

При нажатии на кнопку, чтобы картинка менялась с "Включенный дневной дизайн", на "Включенный темный дизайн"?

Именно картинка, а не CSS.

Я так понял что там нужно поработать с ID в сss, но че сам не огу понять что, куда, зачем вставлять.

yet_warm
На сайте с 26.05.2007
Offline
129
yet_warm
#1

Там картинка не переключается - одна картинка с двумя кнопками (спрайт), по онклику через js меняется background-position: 0 -41px; на background-position: 0 0px; для <div class="switch-skin">.

В смысле она смещается вверх-вниз, показывая нужную часть спрайта.

Многие хотят попасть в рай, мало кто хочет для этого умирать.
G2
На сайте с 27.10.2009
Offline
62
ghost28
#2

Это обычно делается через классы. Два класса описывают .on и .off, которые позиционируют спрайт, а JS по нажатию делает что-нибудь вроде


$('.toggler').click(function(){
  $(this).toggleClass('on').toggleClass('off');
  // какая-нибудь связанная логика
})
КакМаршрутник (http://goo.gl/forms/hMgaH0s9E5) — как маршрутник, но работает.
Andy HaRd
На сайте с 06.02.2015
Offline
39
Andy HaRd
#3
yet_warm:
Там картинка не переключается - одна картинка с двумя кнопками (спрайт), по онклику через js меняется background-position: 0 -41px; на background-position: 0 0px; для <div class="switch-skin">.
В смысле она смещается вверх-вниз, показывая нужную часть спрайта.

Верно, немного не то написал.

Про смену позиции картинки в классе "switch-skin" я заметил, но не знал что это делается с помощью JS.

Так как я вообще нуль в JS, не могли бы подсказать, как такое провернуть?

G2
На сайте с 27.10.2009
Offline
62
ghost28
#4

Вот готовый компонент, например:

http://www.bootstrap-switch.org/

Andy HaRd
На сайте с 06.02.2015
Offline
39
Andy HaRd
#5
ghost28:
Это обычно делается через классы. Два класса описывают .on и .off, которые позиционируют спрайт, а JS по нажатию делает что-нибудь вроде
Код:
$('.toggler').click(function(){
$(this).toggleClass('on').toggleClass('off');
// какая-нибудь связанная логика
})

Правильно я понимаю?

.toggler - засунуть в онклик

.toggleClass - класс, который будет менять позицию спрайта, при нажатии на кнопку

или исправьте, если что-то не так...как уже сказал, до JS еще не дошел, не изучал :)

ghost28:
Вот готовый компонент, например:
http://www.bootstrap-switch.org/

Если я бы еще понимал, о чем там речь...в плане кода...

G2
На сайте с 27.10.2009
Offline
62
ghost28
#6

Вы неправильно понимаете.

.toggler - постоянный класс элемента, по которому jQuery выбирает его

.toggleClass - метод, который переключает (добавляет если нет, убирает если есть) класс на выбранном элементе.

Итого мы добавляем в HTML


<span class="toggler on"></span>

jQuery находит наш span по классу .toggler, и по щелчку убирает класс on, добавляет класс off. По следующему - наоборот.

Andy HaRd
На сайте с 06.02.2015
Offline
39
Andy HaRd
#7

ghost28, Вроде все понял, но не до конца :)

В таком случае нам нужно создавать два класса или один и как их в данном случае назвать, для конкретно данного примера?

Два, имею ввиду:

1) с позицией спрайта background-position: 0 -41px;

2) с background-position: 0 0

Или же мы делаем один класс ".toggler", в который вписываем background-position: 0 -41px; и делаем определенную высоту картинки, чтобы отображалась лишь нужная часть?

Ну а "background-position: 0 0" будет стоять на автомате, так мы зададим высоту, для отображения нужной нам части.

G2
На сайте с 27.10.2009
Offline
62
ghost28
#8

Считаем, что первая картинка на спрайте для off, вторая для on.

.toggler — задаем background image; width, height — такие чтобы показывало одну картинку (состояние).

.on — задаем только смещение — background-position: 0 -41px;

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий