Изменение фона сайта по кнопке

@twitzz · Регистрация: 28.10.2019

Студворк — интернет-сервис помощи студентам

Доброе время суток! У меня такой вопрос: "Нужно создать сайт, в котором будет всего одна кнопка ( текст на ней, к примеру - "Привет" ). При нажатии на неё, у меня меняется фон всего сайта на картинку, которая находится в той же папке. ( Картинка с именем "hello.png". ). Так же, меняется текст кнопки из "Привет" на "Как дела?".
При повторном нажатии на кнопку, фон меняется уже на другую картинку ( hello1.png ).
Как такое сделать? Нужно для лабораторной работы, преподаватель даже методички не дал

.
Нуждаюсь в помощи! Спасибо

@DrType · 16.03.2020, 21:15

Здравствуйте!
Такие задачи легко решаются методами JavaScript. Но назло ленивому преподавателю давайте попробуем сделать на CSS:

HTML5
1
2
3
4
5
6
7
8
9
<input type='checkbox' id='check1'></input>
<label for='check1'>
  <button>Привет!</button>
  </label>
  <input type='checkbox' id='check2'></input>
  <label for='check2' id='label2'>
  <button>Как дела?</button>
</label>
<div></div>

CSS
1
2
3
4
5
6
7
8
9
div{position:fixed; z-index:0; width:100%; height:100%; top:-10em; left:0; background-color:gold; z-index:0}
input{display:none}
label{height:2em;}
button{position:fixed; top:10em; left:40%; width:20%; z-index:1}
#label2{display:none}
#check1:checked ~ div{background-image:url("hello.png")}
#check1:checked ~ label{display:inherit}
#check1:checked + label{display:none}
#check2:checked ~ div{background-image:url("hello1.png")}

Добавлено через 47 минут
Исправлю...

@twitzz · 17.03.2020, 14:59 **[ТС]**

Почему-то, при нажатии кнопки, не меняется текст и фон

В чем может быть проблема?

@gogolik · 17.03.2020, 15:02

twitzz, js нельзя использовать?

@Panda58dev · 17.03.2020, 15:14

Не по теме:

Сообщение от gogolik

js нельзя использовать?

Он слишком скриптовый))

@twitzz · 17.03.2020, 16:03 **[ТС]**

Никаких ограничений не было

@mrtoxas · 17.03.2020, 16:25

DrType, Интересно, что скажет преподаватель наcчет </input>?

Да и вообще, конструкция невалидная

Any button descendant of a label element with a for attribute must have an ID value that matches that for attribute.

@DrType · 17.03.2020, 18:09

Не по теме:

Ужасно...

На JS можно сделать хотя бы так:

HTML5
1
<button id='hello'>Привет</button>

CSS
1
2
3
4
body{background-color:gold}
button{margin-top:3em; margin-left:40%; width:20%; padding:1em;  border:thin solid white; border-radius:0.4em; background-color:rgba(255, 255, 255, 0.3); color:white; font-weight:bold}
.png1{background-image:url('hello.png')}
.png2{background-image:url('hello1.png')}

JavaScript
1
2
const b=document.getElementById('hello');
b.addEventListener('click', function(){if(!document.body.classList.contains('png1')){document.body.classList.add('png1'); this.textContent='Как дела?'} else{document.body.classList.add('png2')}})

mrtoxas, переделал свою разметку:

HTML5
1
2
3
4
5
6
7
8
9
 <input type='checkbox' id='check1'>
<label for='check1'>
  <p>Привет!</p>
</label>
<input type='checkbox' id='check2'>
<label for='check2' id='label2'>
  <p>Как дела?</p>
</label>
<div></div>

@mrtoxas · 17.03.2020, 18:56

DrType, не то, чтобы я придирался

но параграф в label нельзя вкладывать

Добавлено через 20 минут

HTML5
1
<button id="btn" data-view="0">Привет</button>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
const someVar = [
  {title:"Привет1", image:"https://cyberstatic.net/images/statusicon/user_online.png"},
  {title:"Привет2", image:"https://cyberstatic.net/images/statusicon/user_offline.png"}
]
 
btn.onclick = function(){
  let count = someVar[this.dataset.view];
  this.textContent = count.title;
  document.body.style.backgroundImage = `url(${count.image})`;
  this.dataset.view++;
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

@twitzz 5 / 2 / 3 Регистрация: 28.10.2019 Сообщений: 87

	Изменение фона сайта по кнопке 16.03.2020, 19:56. Показов 1325. Ответов 8 Метки нет (Все метки) Доброе время суток! У меня такой вопрос: "Нужно создать сайт, в котором будет всего одна кнопка ( текст на ней, к примеру - "Привет" ). При нажатии на неё, у меня меняется фон всего сайта на картинку, которая находится в той же папке. ( Картинка с именем "hello.png". ). Так же, меняется текст кнопки из "Привет" на "Как дела?". При повторном нажатии на кнопку, фон меняется уже на другую картинку ( hello1.png ). Как такое сделать? Нужно для лабораторной работы, преподаватель даже методички не дал . Нуждаюсь в помощи! Спасибо 0

@twitzz 5 / 2 / 3 Регистрация: 28.10.2019 Сообщений: 87
	17.03.2020, 14:59 [ТС]
	Почему-то, при нажатии кнопки, не меняется текст и фон В чем может быть проблема? Миниатюры 0

@gogolik Супер-модератор 3953 / 2064 / 829 Регистрация: 13.03.2010 Сообщений: 6,786
	17.03.2020, 15:02
	twitzz, js нельзя использовать? 0

@twitzz 5 / 2 / 3 Регистрация: 28.10.2019 Сообщений: 87
	17.03.2020, 16:03 [ТС]
	Никаких ограничений не было 0