Нажатие javascript change background image

Question

Привет, у меня есть проблема с некоторым javascript. У меня есть DIV макет кнопки, который делает что-то (в моей погоне он будет вставить номер 1 в ложе) и я хочу, чтобы изменить цвет фона кнопки при нажатии:

<div id="nr1"><INPUT TYPE="button" NAME="one" OnClick="this.style = 'background-image:URL(images/totalback.gif);'; Calc.Input.value += '1'" style="width:45px; height:30px; background-color:transparent; border-style: none; border-width: 0px 0px 0px 0px"></div> 

Это код, но он игнорирует мое изменение фонового изображения. Может кто-нибудь мне помочь? Краткая информация: у меня мало информации о javascript.

В любом случае, спасибо.

Answer 1

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     $('#nr1 input').on("click", function(){ 
     $(this).css({'background' : 'red'}); 
     }); 
    }); 
</script> 

http://api.jquery.com/css/

Answer 2

При использовании Javascript вы сделать это следующим образом:

this.style.backgroundImage="url()"; 

Обратите внимание, что Javascript изменяет синтаксис бит, вместо фонового изображения вы используете backgroundImage.

Answer 3

Я надеюсь, что вы можете использовать что-то вроде этого в CSS:

#your_btn_id{ 
    width:200px; 
    height:50px; 
    background-image: url('../images/inactive.png'); 
} 

При нажатии изменить фоновое изображение:

#your_btn_id:active{ 
    background-image: url('../images/active.png'); 
} 

Надеется, что это будет работать и то, является его очень прост в использовании.