Замена 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 менял свой путь к другой картинке. Может кто-то посоветовать как это сделать? |
<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)'">
|
Спасибо огромное, все работает!!
А не подскажете еще, как сделать чтоб при повторном нажатии все возвращалось обратно? ну то есть по типу выключателя - вкл/выкл |
#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>
|
| Часовой пояс GMT +3, время: 17:34. |