comment changer l'icône du bouton sur clic?

Question

J'ai ce bouton, qui a une icône (image). Maintenant, je veux faire est sur un clic sur une icône de bouton (image) va changer à une autre icône et lorsque vous cliquez à nouveau, il va revenir sur l'ancienne icône. (comme le principe de bascule).

Voici mon bouton code 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; 
} 

et voici le code icône CSS:

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

Et voilà comment j'appelle mon bouton en html:

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

Quelqu'un peut-il me dire comment faire du code en javascript, que lorsque je clique sur le bouton, l'icône (image de fond) va changer et rester comme ça, un jusqu'à ce que vous cliquez à nouveau se retourner ancien (comme le système à bascule)

Answer 1

Sur un navigateur moderne qui prend en charge addEventListener et le Class List API (des shims sont disponibles pour les deux sur leurs pages MDN respectives pour ajouter le support aux broswers plus anciens), vous pouvez le faire.

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); 

Sur jsfiddle

Answer 2

solution rapide

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 
       } 

Je pense que vous n'êtes pas au courant des merveilles Jquery peut vous apporter. Si c'est le cas, vous devriez vraiment le rechercher, cela rend beaucoup de choses comme ça beaucoup plus facile.

Answer 3

Voici comment vous pouvez le faire dans jquery

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

Pour utiliser jquery, vous devrez ajouter à la section de la tête de votre page:

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

et tapez le code ci-dessus ensuite.