Discussion :

[team94]

Bonjour à vous,

Ne connaissant pas grand chose à javascript je me heurte à un problème.

je crée un timer avec trois boutons play/pause, reset , et reset total.

je vous met le code javascript d'une de mes fonction :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//cette fonction est appelée quand le bouton démarré est cliqué.
function Toggle(button){
    Pause = !Pause;
    if (Pause){
        button.value = "Pause";
    }
    else{
        if (StoppedAtRoundLimit){
            RoundCount = 0;
            StoppedAtRoundLimit = false;
        }
        NotStarted = false;
        lasttime = new Date();
        // Starting...
        button.value = "Pause";
        Countdown();
    }
}

et le html :

Code html :

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

1
2
3
4
5
<div id="demarrer" style="display:inline-block;">
	<ul>
		<li><figure><img src="" id="btnStart" class="Start" type="button"  onClick="Toggle(this);"/><figcaption>test</figcaption></figure></li>
</ul>
</div>

le code fonctionne bien mais je voudrais que le button.value ne soit pas Pause mais une image je n'arrive pas a l'insérer .

Si une bonne âme pourrais m'aider je lui en serais très reconnaissant.

Merci ;-)

Est ce possible ?

[SpaceFrog]

mets un input type button et modifie le backgrounf image ...

[Spartacusply]

Pour spécifier encore un peu davantage si vraiment tu n'y connaît rien, c'est dans le css que ça se passe, dans la propriété "background-image" de tes boutons.

[NoSmoking]

Bonjour,
un INPUT type="image" ne fait pas l'affaire?

Code html :

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

<input onclick="alert(this.src);"type="image" src="http://www.developpez.net/forums/images/buttons/resolu.gif" value="résolu">

ou encore un BUTTON avec un peu de CSS

[SpaceFrog]

Attention avec les input type image qui utilisés dans les forms jouent le rôle de bouton submit et envoient en même temps les coordonnées du click sur l'image en paramètres

[SylvainPV]

Vraiment pas fan de cette spec, input type="image". C'est très trompeur, on s'attend à ce qu'il s'agisse du type de saisie alors qu'il s'agit simplement de la tête du bouton.
J'aurais préféré que cela remplace <input type="file" accept="image/*"> ; mais bon, rétrocompatibilité oblige...

[team94]

Merci de vos réponses je vais me pencher sur le css bien que je ne pense pas que cela soit possible avec.

Je m'explique

Lorsque le chrono est arrété l'image a afficher doit être la flèche "Play" jusque la en CSS pas de problème,

mais lorsque le chrono est lancer et tous le temps où il tourne il doit m'afficher les deux barres de "pause"et la le CSS ne peut pas savoir. (ou alors j'ai loupé quelque chose ?).

mais bon merci quand même.

@bientôt ;-)

[SpaceFrog]

et qu'est ce qui t’empêche de remplacer dynamiquement le background-image ?

[team94]

AH ça m’intéresse une petite piste ?

cool merci en tous cas

[SpaceFrog]

Mieux avec le principe des sprites: image comportant tous les états possibles ..
juste en modifiant ensuite la position en background de l'image ...

dans l'exemple suivant j'ai choppé la première image trouvée sur google (pas top j'avoue ...)
http://jsfiddle.net/Fsya5/

elle comporte 3 possibilité, je n'en utilise que 2
mon bouton fait 50 px pas 50px; l'image 150 x 50 donc en déplaçant l'image en arrière plan elle ne laisse apparaitre que la partie qui nous intéresse
à noter que je rattache un état "clicked" au bouton pour savoir quelle partie afficher dont tu pourras te servir pour lancer ou mettre en pause ...

[team94]

merci beaucoup !