Discussion :

[math11]

Salut,

Actuellement occupé à la mise à jour d'un site, je butte sur le problème suivant.

Je souhaite faire un bouton dont l'image change lorsque il est cliqué. Pour ce faire, j'ai deux images (voir document en annexe), l'état par défaut est le bouton non-enfoncé (image du haut) et l'état au click est le bouton enfoncé (image du bas); jusque là pas de problème, j'utilise la fonction jquery suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("#btn").click(function() {
	$(this).attr('src','images/btn_1.png');
});

Le problème est que lorsque le bouton est cliqué, il reprenne son état d'origine.

Merci d'avance.

math11

[Watilin]

Je vois deux façons d'interpréter ton problème :

1. On clique deux fois sur le bouton. Après le premier clic, il apparaît enfoncé ; après le second clic, il reprend son apparence originale.
2. On ne clique qu'une fois ; tant que la souris est enfoncée, le bouton apparaît enfoncé, et quand la souris est relâchée, le bouton reprend son apparence originale.

Dans le 1er cas, il suffit d'utiliser l'attribut src comme indicateur d'état. Si src == "images/btn_1.png" alors on remet l'image initiale, sinon on met "images/btn_1.png".

Dans le 2nd cas, la méthode .hover() est exactement ce qu'il faut.

[Bovino]

Il existait bien une méthode .toggle() qui permettait d'alterner différentes fonctions sur le clic, mais elle a été dépréciée avec la version 1.8 et retirée de la version 1.9.

Donc, comme dit Watilin, il va falloir intégrer un test permettant de savoir quelle valeur affecter à src.
Je pencherais volontiers pour un attribut data-*.

[math11]

Salut,

Merci à vous Watilin & Bovino, mais finalement, j'ai résolu le problème avec les états .mousedown et .mouseup de la façon suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$("#btn").mousedown(function() {
			$(this).attr('src','images/btn_1.png');
		});
 
$("#btn").mouseup(function() {
			$(this).attr('src','images/btn_0.png');
		});