Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.12.2015, 07:39
Новичок на форуме
Отправить личное сообщение для Musica24 Посмотреть профиль Найти все сообщения от Musica24
 
Регистрация: 18.12.2015
Сообщений: 4

Замена background при нажатии кнопки
Добрый всем день. Осваиваю js, в связи с праздниками появилась идею сделать небольшую украшалку для сайта.

Есть шапка
<div id="header">
	</div>


У нее прописан такой стиль

#header {
display: block;
height: 273px;
background:url('..//images/ng_vykl.jpg') no-repeat center bottom;
}


и есть кнопка
<input type="button" value='заменить'>


Задача такая, чтобы при нажатии этой кнопки background менял свой путь к другой картинке. Может кто-то посоветовать как это сделать?
Ответить с цитированием
  #2 (permalink)  
Старый 18.12.2015, 08:43
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<style>
#header {
display: block;
height: 100px;
background:url(http://da.mybb.ru/images/90x90/41/3173241.jpg) no-repeat center bottom;
}
</style>
<div id="header"></div>
<input type="button" value='заменить' onclick="document.getElementById('header').style.backgroundImage='url(http://da.mybb.ru/images/90x90/42/3161342.jpg)'">
Ответить с цитированием
  #3 (permalink)  
Старый 18.12.2015, 09:22
Новичок на форуме
Отправить личное сообщение для Musica24 Посмотреть профиль Найти все сообщения от Musica24
 
Регистрация: 18.12.2015
Сообщений: 4

Спасибо огромное, все работает!!
А не подскажете еще, как сделать чтоб при повторном нажатии все возвращалось обратно? ну то есть по типу выключателя - вкл/выкл
Ответить с цитированием
  #4 (permalink)  
Старый 18.12.2015, 09:43
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

#header {
  display: block;
  height: 273px;
  background:url('..//images/ng_vykl.jpg') no-repeat center bottom;
}
#header.bg2 {
  background-image: url('..//images/ng_vykl-2.jpg');
}


<button onclick="header.classList.toggle('bg2')">Button</button>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена цвета/картинки фона при нажатии на элемент Webtest Элементы интерфейса 16 20.04.2017 22:36
Активация checkbox при нажатии на текст и изменение стиля у текста. ilyakor jQuery 2 10.06.2014 19:34
SyntaxHighlighter подсветка при нажатии faraday Общие вопросы Javascript 3 31.03.2012 23:43
Поменять элемент матрицы при нажатии кнопки в другом фрейме Alexiy Общие вопросы Javascript 1 09.11.2011 11:49
при нажатии на картинку(типа кнопки) скрывать и показывать DIV Russianmaniac Элементы интерфейса 4 28.11.2010 00:47