Как изменить фон страницы сайта

Всем привет! Сегодня я покажу примеры изменения фона веб-страницы с помощью языка JavaScript!

Итак, в данном уроке будет рассмотрено два способа изменения фона, все примеры, как и всегда, вы можете скачать к себе на компьютер, изменить их, либо использовать их на своих сайтах в том виде, в котором их создал я!

Без долгой вступительной болтологии переходим к делу!

 

Как изменить фон, выбрав цвет?

В этом примере будет показано, как изменить фон, выбрав нужный цвет из выпадающего списка.

Давайте рассмотрим верстку:

        <select onchange="changeBg()" id="color">
                <option value="#FF033E">Американская роза</option>
                <option value="#9966CC">Аметистовый</option>
                <option value="#8DB600">Яблочно-зелёный</option>
                <option value="#00FFFF">Цвет морской волны</option>
                <option value="#4B5320">Армейский зелёный</option>
                <option value="#3B444B">Мышьяковый</option>
                <option value="red">Красный</option>
                <option value="#007FFF">Лазурный, Азур</option>
        </select>

Как видите, у нас имеется выпадающий список с идентификатором – color. По событию onchange (при изменении выбранного элемента списка) будет срабатывать функция changeBg (о ней ниже), которая и будет изменять фон нашей страницы.

Расшифровка названия функции:
change переводится с английского как - Изменение.
Bg - сокращение от background, которое переводится как - Фон

Добавлять и изменять цвета очень просто, для добавления нового цвета просто добавьте в код строчку вида:

<option value="Код цвета">Название цвета</option>

Можно добавлять не только код цвета, но и непосредственно его название (без решетки), например, red, green, blue и так далее.

Что найти нужный цвет, просто введи в любом поисковике фразу:

таблица HTML цветов

CSS стили:

#color{
    margin: 60px auto;
    display: block;
    padding: 10px;
}

Для примера, с помощью этих стилей, я выровнял список по центру, а также, для красоты, задал внутренние отступы в 10px.

Теперь давайте рассмотрим и разберем код функции, которая изменяем фон:

        function changeBg(){
          var myColor = document.getElementById("color");
          document.body.style.backgroundColor=myColor.options[myColor.selectedIndex].value;
        }

Первой строчкой функции мы сохраняем объект (который мы выбрали по id color) в переменную myColor.
Второй строчкой вы выбираем элемент страницы body и изменяем у него фон, присваивая ему значение выбранного элемента списка.

Как видите, ничего сложного нет.

Посмотреть результат

Скачать

Теперь давайте рассмотрим второй пример – с картинками.

 

Как изменить фон, нажав на картинку?

Здесь пример будет таковым: перед вами будет несколько картинок, и по нажатию на одну из них, изменится фон (то есть в качестве фона будет использоваться картинка).

HTML верстка изображений:

        <div id="bg">
                <img src="http://sergey-oganesyan.ru/wp-content/uploads/2014/11/1.jpg" onclick="changeBg(this)">
                <img src="http://sergey-oganesyan.ru/wp-content/uploads/2014/11/2.jpg" onclick="changeBg(this)">
                <img src="http://sergey-oganesyan.ru/wp-content/uploads/2014/11/3.jpg" onclick="changeBg(this)">
                <img src="http://sergey-oganesyan.ru/wp-content/uploads/2014/11/4.jpg" onclick="changeBg(this)">
                <img src="http://sergey-oganesyan.ru/wp-content/uploads/2014/11/5.jpg" onclick="changeBg(this)">
        </div>

В общий блок div с идентификатором bg мы помещаем изображения, по клику на которые будет изменяться фон.

Если нужно добавить свою картинку, то просто добавьте строку вида:

<img src="Ссылка на картинку" onclick="changeBg(this)">

указав путь (ссылку) к картинке.

По клику на каждую из картинок (то есть по событию onclick) будет срабатывать функция changeBg, в качестве параметра которой будет передаваться текущая картинка (this).

Теперь давайте рассмотрим Css код, а после разберем функцию изменения фона:

#bg{
    margin: 60px auto;
    text-align: center;
}
#bg img{
    width: 200px;
    cursor: pointer;
}

Общий блок (#bg) выравниваем по центру, а также, выравниваем по центру все элементы (в данном случае картинки).

Вторым правилом (#bg img) мы задаем всем картинкам общего блока ширину в 200px, а также изменяем курсор при наведении на картинку (pointer – курсор в виде указателя).

Реализация функции:

        function changeBg(img){
                document.body.style.backgroundImage = 'url(' + img.src + ')';
        }

Как много кода – не правда ли? 🙂

Этой строчкой мы берем элемент body и изменяем у него фоновую картинку, в качестве url адреса (пути) картинки берем атрибут src той картинки, на которую мы нажали.

Вот так вот при просто это делается!

Посмотреть результат

Скачать

На этом данный урок по JavaScript завершен, надеюсь, он будет полезен для вас.
Желаю вам удачи, пока!

Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.