Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Смена фона кнопки (https://javascript.ru/forum/dom-window/38554-smena-fona-knopki.html)

prettyremage 06.06.2013 13:03

Смена фона кнопки
 
Ребят не получается сделать смену фона кнопки, точнее на кнопки у меня градиент, при клике на него он должен меняться на другой градиент. Подскажите мне как это сделать.

Kvark 06.06.2013 13:08

css основы

prettyremage 06.06.2013 13:16

Мне надо чтоб при нажатии вид кнопки оставался таким же

Kvark 06.06.2013 13:51

так а градиент как задаеться у вас изначально, не в css разве?

prettyremage 06.06.2013 14:00

Градиент не везде работает, поэтому я подумала лучше полностью вырезать кнопку

Kvark 06.06.2013 14:08

ну так а в чем проблема поменять картинку в зависимости от наведения/нажатия мышкой?

prettyremage 06.06.2013 14:19

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

Kvark 06.06.2013 14:27

все мы тут учимся, как научиться читать? - выучи азбуку - так я еще только учусь - опускаються руки просто :)

"Ребят не получается сделать смену фона кнопки", что там именно не получается то? :)

prettyremage 06.06.2013 14:45

если делать ссылкой, то получается только как hover, а мне надо чтоб при нажатии картинка другая оставалась.

prettyremage 06.06.2013 14:47

<onclick="this.setAttribute('src','new.jpg')">?

Kvark 06.06.2013 14:52

HTML
1
<button id="btn1" onClick="replaceButton();">Hello!</button>


JS
function replaceButton() {
$('#btn1').replaceWith('<button id="btn2">Bye!</button>');
}


CSS
btn1 {
    background: #2E8CE3; /* Цвет фона */
    padding: 7px 30px; /* Поля вокруг текста */
    font-size: 13px; /* Размер шрифта */ 
    font-weight: bold; /* Насыщенность шрифта */
    color: #FFFFFF; /* Цвет шрифта */
    text-align: center; /* Надпись на кнопке по центру */
    border: solid 1px #73C8F0; /* Параметры рамки кнопки */ 
    cursor: pointer; /* Изменение вида курсора при наведении*/
}

btn2 {
    background: #2E69E3; /* Цвет фона */
    padding: 7px 30px; /* Поля вокруг текста */
    font-size: 13px; /* Размер шрифта */ 
    font-weight: bold; /* Насыщенность шрифта */
    color: #FFFFFF; /* Цвет шрифта */
    text-align: center; /* Надпись на кнопке по центру */
    border: outset 2px #73C8F0; /* Параметры рамки кнопки */ 
    cursor: pointer; /* Изменение вида курсора при наведении*/
}

как то так

prettyremage 06.06.2013 14:58

у меня руки не опускаются=)

prettyremage 06.06.2013 14:59

спасибо=)

Kvark 06.06.2013 15:08

+ жмакать если помогло незабываем :)

prettyremage 06.06.2013 15:19

не работает ваш метод

Kvark 06.06.2013 15:55

а как ты jquery - правильно хоть подключаеш?
приведите весь свой код, а то нифига непонятно что вы блудите в 3 соснах

prettyremage 06.06.2013 16:00

<script src="http://code.jquery.com/jquery-latest.js"></script>

prettyremage 06.06.2013 20:45

все работает, но некорректно. у меня на странице таких кнопок несколько с одинаковыми стилями, если на одну нажмешь меняются все, как это исправить?

bes 06.06.2013 21:25

Цитата:

Сообщение от Kvark
приведите весь свой код

Цитата:

Сообщение от prettyremage
<script src="http://code.jquery.com/jquery-latest.js"></script>

твоё? :D

Цитата:

Сообщение от prettyremage
у меня на странице таких кнопок несколько с одинаковыми стилями, если на одну нажмешь меняются все, как это исправить?

менять только у той, по которой кликаешь

Kvark 07.06.2013 12:49

bes: там я подвел - вначале спросил как подключает джиквери а потом подумал может его и нет у нее вовсе и отредактировал, а она видимо медленно писала :) так что тут не стебайтесь :)

pretty: стили назначаються как по классу так и по ид, если вы указываете класс, то правильно :) меняеться у всех кто к томуже классу относиться: "9Б! к доске!" все и ломануться... а вот если по ид дернуть: "Сидоров! К доске!" - то получиться вызвать того кто нужен.

bes 07.06.2013 18:43

Цитата:

Сообщение от Kvark
так что тут не стебайтесь

зато смешно получилось :)

так пойдёт?
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<button class="but">click</button>
<button class="but">click</button>
<button class="but">click</button>
<button class="but">click</button>
<script>
$(".but").bind("click", function () {
	$(this).css("background", "#2E69E3");
});
</script>


Часовой пояс GMT +3, время: 05:30.