Как изменить значок кнопки на клик?

Question

У меня есть эта кнопка, у которой есть значок (картинка). Теперь я хочу сделать это, нажав на значок кнопки (изображение), изменится на другой значок, и когда вы нажмете еще раз, он вернется к старой иконке. (например, принцип переключения).

Вот мой код кнопки CSS:

.w8-button { 
    display: table; 
    padding: 7px 15px 8px 15px; 
    border: none; 
    font-family: "open_sans_lightregular"; 
    font-size: 13px; 
    font-weight: bold; 
    cursor: pointer; 
    opacity: 0.9; 
} 

и здесь значок CSS код:

.w8-button.iconize { 
    padding-right: 50px !important; 
    background: url(D:/firstPicture.png) no-repeat 115px center; 
} 

И это, как я называю свою кнопку в HTML:

<li> 
    <input type="submit" id="w8-d-blue" name="w8-d-blue" class="w8-button iconize" value="Button"/> 
</li> 

Может кто-нибудь сказать мне, как сделать код в javascript, что, когда я нажимаю на кнопку, значок (фоновое изображение) изменится и останется таким, un пока вы нажмите снова вернуться к старой (как система переключения)

Answer 1

В современном браузере, поддерживающем addEventListener и Class List API (планки доступны для обеих страниц MDN, чтобы добавить поддержку старых броузеров), вы можете это сделать.

CSS

.w8-button { 
    display: table; 
    padding: 7px 15px 8px 15px; 
    border: none; 
    font-family:"open_sans_lightregular"; 
    font-size: 13px; 
    font-weight: bold; 
    cursor: pointer; 
    opacity: 0.9; 
} 
.w8-button.iconize { 
    padding-right: 50px !important; 
    background: url("http://imageshack.us/a/img856/3817/ticklf.png") no-repeat 5px center; 
} 
.w8-button.iconize2 { 
    padding-right: 50px !important; 
    background: url("http://imageshack.us/a/img822/1917/crossn.png") no-repeat 5px center; 
} 

HTML

<li> 
    <input type="submit" id="w8-d-blue" name="w8-d-blue" class="w8-button iconize" value="Button" /> 
</li> 

Javascript

document.getElementById("w8-d-blue").addEventListener("click", function (e) { 
    var target = e.target; 

    target.classList.toggle("iconize"); 
    target.classList.toggle("iconize2"); 
}, false); 

На jsfiddle

Answer 2

быстрое решение

var switch = 0, element = document.getElementById("w8-d-blue"), img1, img2; 
element.onclick = function(){ 

      if (switch == 0){ 
       element.style.backgroundImage(img1); 
       switch = 1; 
       } 
      else { 
         element.style.backgroundImage(img2); 
       switch = 0 
       } 

Я думаю, что вы не знаете о чудесах Jquery может принести вам. Если это так, вы должны действительно посмотреть его, это значительно упростит многие вещи.

Answer 3

Вот как вы можете сделать это в JQuery

$(function(){ 
    $("#w8-d-blue").click(function(){ 
    $(this).toggleClass("iconize"); 
    return true; 
    }); 
}); 

Чтобы использовать JQuery вам придется добавить это к головной части вашей страницы:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 

и введите код выше после этого.