# Bouton Javascript à double commande



## dado (19 Février 2011)

Bonjour à tous,

Actuellement, sur mon site figure la ligne de code ci-dessous :


```
<input type="button" value=" * " title="Start or stop auto play" onCLick="AutoPlay(-1);">
```

Au résultat, si je clique sur le bouton "***" l'animation automatique débute. Un nouveau clic l'arrête.

Je souhaite améliorer la présentation de ce bouton.

Je voudrais q'un clic sur le bouton fasse apparaître le mot ou le symbole Play. Que le clic suivant fasse apparaître le mot ou le symbole Stop. Et bien sûr que l'événement "Start or stop auto play" se produise.

Je vois bien comment fabriquer les deux images.

Pouvez-vous m'indiquer quel code entrer et a quel emplacement pour que la seconde image se substitue à la première et que l'événement se produise ?
Le javascript de ce programme est contenu dans deux fichiers :jsp.js et jsg.js

Merci à vous 
dado


----------



## ntx (19 Février 2011)

Tu places tes boutons dans des div et tu joues avec l'attribut "display" du style de ton div pour les rendre visible (block) ou invisible (none).


----------



## dado (19 Février 2011)

Merci ntx pour ta réponse, mais pourrais-tu expliquer davantage ta réponse, avec un exemple de code.

En effet, j'essaie de modifier un programme prêt à l'emploi et je ne maîtrise pas du tout les CSS et n'ai aucune notion de javascript.


----------



## ntx (19 Février 2011)

Un exemple 
Ca doit donner chez toi quelque chose dans le genre, en très raccourci :

```
<html>
<head>
<script type="text/javascript">
function changeBouton1()
{
document.getElementById('monBouton1').display="block";
document.getElementById('monBouton2').display="none";
}
function changeBouton2()
{
document.getElementById('monBouton2').display="block";
document.getElementById('monBouton1').display="none";
}
</script>
</head>
<body>

<div id="monBouton1" display="block">
  <input type="button1" onclick="changeBouton2()">
</div>
<div id="monBouton2" display="none">
  <input type="button2" onclick="changeBouton1()">
</div>

</body>
</html>
```


----------



## dado (19 Février 2011)

Merci ntx d'avoir bien voulu expliciter ta réponse. J'effectue le test demain et te tiens au courant

dado


----------



## dado (20 Février 2011)

Bonjour ntx,

J'ai exécuté tes instructions :
Confectionné deux boutons que j'ai nommé "monBouton1.png" et monBouton2.png. Je les ai placé à la racine.
Collé comme il convient le code CSS

Au résultat, j'obtiens dans la colonne de gauche,  deux champs superposés et vides.

Je ne souhaite pas obtenir deux champs, mais au départ, la première image qui sera remplacée au prochain clic par la seconde.

Le fait que l'image n'apparaisse pas doit tenir au fait que l'url n'est pas renseignée

D'autre part, le code n'indique pas la seconde action consécutive au changement d'image :  onCLick="AutoPlay(-1);

Tu trouveras à l'adresse ci-dessous les deux champs superposés et au -dessus le bouton"***" que je souhaite remplacer qui commande l'animation du diagramme.

http://damier.manceau.free.fr/monbouton/essai2.htm

Le code source peut-être consulté à l'adresse :

http://damier.manceau.free.fr/monbouton/essai2b.htm

Pourrais-tu m'indiquer ce que je dois ajouter ou modifier au code, avec la syntaxe, pour le rendre opérationnel ?

Merci de ton aide 

dado


----------



## ntx (20 Février 2011)

Voici le code corrigé et qui marche :

```
<html>
<head>
	<script type="text/javascript">
	function changeBouton1()
	{
	document.getElementById('monBouton1').style.display="block";
	document.getElementById('monBouton2').style.display="none";
	}
	function changeBouton2()
	{
	document.getElementById('monBouton2').style.display="block";
	document.getElementById('monBouton1').style.display="none";
	}
	</script>
</head>
	<body>
	
	<div id="monBouton1" style="display:block">
	  <input type="button" onclick="changeBouton2()" value="bouton 1">
	</div>
	<div id="monBouton2" style="display:none">
	  <input type="button" onclick="changeBouton1()" value="bouton 2">
	</div>
	
	</body>
</html>
```
Il manquait quelques "style" par ci et par là. 

Et oublie les frame et frameset, ça ne se fait plus depuis des années et ça peut poser des problèmes de compatibilité avec certains navigateurs. Utilise des div et le CSS


----------



## dado (20 Février 2011)

Bravo ntx,

A présent, le bouton apparaît correctement et change de nom au clic.
Je verrai plus tard dans le <body> quelle value = renommer en "Play" et en "Stop"

Mais peux tu me dire ce qu'il faut ajouter au script pour que le changement de nom entraîne le départ ou l'arrêt de l'animation?

Actuellement le bouton "***" qui remplit cette fonction répond au code ci-dessous :

<input type="button" value=" * " title="Start or stop auto play" onCLick="AutoPlay(-1);">

voir le nouveau résultat avec ton bouton et celui à remplacer juste au-dessus : 

*ICI*

Il me semble que la suite consiste à se raccorder au javascript qui commande l'animation.
Si tu le souhaites, je tiens le fichier .jsb externe qui le gère à ta disposition.

J'ai relevé :
lignes 109 et 110 dans : function HandleKey(key)

if (key == KeyAuto1 || key == KeyAuto2)
		AutoPlay(Game);

lignes 609 à 612 :

function AutoPlay(game)
{
  SetGame(game);
	Autos[Game] = !Autos[Game];
}

Cela te renseigne t-il sur ce qu'il faut ajouter ou pour que le script s'exécute ?

à bientôt et merci

dado


----------



## Anonyme (21 Février 2011)

Perso j'utiliserais le même bouton avec changement du nom et image de fond : 


```
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Bouton changeant</title>
    <style type="text/css">
        
        #playpause {
            width: 30px;
            height: 30px;
            border: #000 1px solid;
            }
        #playpause span {
            position: absolute;
            left: -5000px;
            top: -5000px;
            
        }
        //image de fond de départ et en pause
        #playpause {
            background: #FFF url(bouton-pause.png) no-repeat;
        }
        //on change l'image en lecture
        #playpause.playing {
            background-image: url(bouton-play.png);
        }
    
    </style>
</head>

<body>
<h1>Bouton changeant</h1>
<button id="playpause" class=""><span>Jouer</span></button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#playpause').click(function() {
                               
  if ($(this).hasClass("playing")) {  
      $('#playpause span').text("Jouer");
      $(this).removeClass("playing");
  }
  else {
        $(this).addClass("playing");
        $('#playpause span').text("Arrêter");
  }
});
</script>
</body>
</html>
```
Vive jquery.


----------



## fpoil (21 Février 2011)

J'aurais presque dit la même chose mais charger tout jquery pour un bouton...


----------



## Anonyme (21 Février 2011)

fpoil a dit:


> J'aurais presque dit la même chose mais charger tout jquery pour un bouton...



C'est jusque que le js pur, je ne manipule pas très bien et puis il pourra s'en servir pour d'autres choses.


----------



## dado (21 Février 2011)

Bonjour gloup gloup,
Bonjour à tous,

L'alternative qui consiste à remplacer le texte de la commande par les symboles correspondants est intéressante.
J'ai donc fabriqué à la hâte les deux images .png correspondantes.
Hélas ! Le résultat n'est pas concluant.

Au départ, j'ai tout simplement copié collé le texte intégral dans un document .html vierge.
Sous internet explorer, il apparaît un carré vide. Sous safari le fond est grisé

Test 1

Puis, j'ai collé le script dans le document de destination.
Sous internet explorer apparaît le bouton pause, mais le clic ne change pas son aspect

Test 2

Peut-être pourras-tu m'indiquer les corrections qu'il faut apporter pour que le second bouton apparaisse au clic de la souris.

Mais cela ne suffira pas pour rendre le script opérationnel. En effet, l'exécution du script doit démarrer ou stopper l'animation du diagramme, comme le fait actuellement le bouton " *** "

Comme je l'ai dit à ntx, je tiendrai à votre disposition les fichiers qui vous sont nécessaires à rendre le tout opérationnel.

à bientôt


----------



## fpoil (21 Février 2011)

pour le test1 :

```
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Bouton changeant</title>
    <style type="text/css">
        
#playpause::-moz-focus-inner{
    border:0; //pour éviter d'avoir les pointillés sur ton bouton au moment du click
             
        #playpause span 
        {
            position: relative;
            left: 30px;
            top: 0px;
        }
        
        #playpause
        {
            width: 30px;
            height: 30px;
            border: #000 1px solid;
            
        }
        .noplaying 
        {
             
            background: #FFF url(bouton-play.png) no-repeat;
        }
     
        .playing 
        {
            background: #FFF url(bouton-pause.png) no-repeat;
        }
    
    </style>
</head>

<body>
<h1>Bouton changeant</h1>
<button id='playpause'class="noplaying"><span>Jouer</span></button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#playpause').click(function() {
                               
  if ($(this).hasClass("playing")) {  
      $('#playpause span').text("Jouer");
      $(this).removeClass("playing").addClass("noplaying");
  }
  else {
        $(this).removeClass("noplaying").addClass("playing");
        $('#playpause span').text("Arrêter");
  }
});
</script>
</body>
</html>
```
reste plus qu'à ajouter onclick="AutoPlay(-1);" sur ton bouton playpause


----------



## dado (22 Février 2011)

Bonjour à tous,

Cela  me fait très plaisir de voir que vous travaillez activement à solutionner ma question.

Je viens de réussir à mettre en uvre la proposition de ntx, elle est visible *ici*

J'ai tout d'abord trouvé comment ajouter le deuxième événement à onclick

Comme je n'ai pas trouvé la solution CSS pour aligner mon bouton sous le diagramme, je l'ai inséré dans une table.
Ca ne va pas plaire à ntx, mais je veux bien qu'il m'indique une solution propre.

Voici donc le code actuel du qui conduit à la solution :


```
<body>
</table>
<table align="center" border="0">
  <tr>
    <td><div id="monBouton1" style="display:block align=center">
	  <input type="button" onclick="changeBouton2(); AutoPlay(-1)" value="auto">
	</div>
	<div id="monBouton2" style="display:none">
	  <input type="button" onclick="changeBouton1(); AutoPlay(-1)" value="stop">
</div>
</td>
  </tr>
</table></body>
```

A présent, je vais m'appliquer à mettre en uvre la solution de fpoil qui fait appel aux symboles.

Merci à tous 

dado


----------



## dado (22 Février 2011)

Re Bonjour fpoil,

Je fais suite à mon précédent message.

J'ai mis en uvre *ici* la solution que tu m'as indiquée.

Pour l'instant, apparaît le texte "Jouer" qui devient "Arrêter" au clic de souris.

Ce qui est prévu, c'est d'obtenir au lieu de ces textes les symboles correspondants, soit : bouton-play.png et bouton-pause.png que j'ai placé dans le même répertoire.

Vois-tu ce que je peux faire pour y parvenir ?

Ensuite, merci de m'indiquer ou placer précisément onclick="AutoPlay(-1);" pour relier ce bouton à l'instruction.

Si en plus tu peux me dire ce que je peux faire pour centrer proprement le bouton sous le diagramme, ce sera parfait

à bientôt et merci encore 

dado


----------



## fpoil (22 Février 2011)

1) il y a des erreurs dans le code que j'ai copié...désolé, dans la première ligne de la "css" :


```
#playpause::-moz-focus-inner{border:0; //pour éviter d'avoir les pointillés sur ton bouton au moment du click
```
Il manque l'accolade de fin (en gras ci dessous) et il faut supprimer les commentaires (le double // et ce qui suit) pour obtenir ceci :


```
#playpause::-moz-focus-inner{
    border:0; [B]}[/B]
```
2) pour le onclick :

il faut en fait le rajouter dans le script sous la forme :


```
$('#playpause').click(function() { 
                                 
  if ($(this).hasClass("playing")) {   
  $('#playpause span').text("Jouer"); 
  $(this).removeClass("playing").addClass("noplaying"); 
  } 
  else { 
  $(this).removeClass("noplaying").addClass("playing"); 
 $('#playpause span').text("Arrêter"); 
 } 
[B]return AutoPlay(-1); [/B]
});
```


----------



## Anonyme (22 Février 2011)

Attention, enlever l'outline est une très mauvaise idée pour les personnes naviguant au clavier : impossibilité de voir où on se trouve dans la page.


----------



## dado (22 Février 2011)

Bravo fpoil 

- Cette fois, cela fonctionne *ICI*

- Tu remarqueras que mes symboles dessinés à la hâte ne sont pas jolis, mais je vais prendre le temps de les fignoler.

- Ton intention était d'éviter les pointillés autour du bouton au moment du clic.
C'est bien le cas dans Safari et Firefox. Mais ce n'est pas le cas dans Internet Explorer. Est-ce possible d'y remédier car IE est le seul navigateur qui éclaire la progression de la partie dans la colonne de droite ?

- Dans la mesure ou nous communiquons à partir de symboles, je voulais supprimer le texte "Jouer" ou "Arrêter"devenu inutile. J'y suis parvenu en effaçant d'une part le mot jouer dans la première ligne du <body> entre les balises <span> et d'autre part en effaçant le mot Jouer de la deuxième ligne du if et le mot Arrêter de la deuxième ligne du else. J'espère que c'était la bonne façon de procéder.

- Quand au positionnement du bouton, je l'ai centré dans un tableau, ce qui devrait te faire bondir. S'il y a mieux, je reste à l'écoute

Encore merci pour tes efforts.

Dado


----------



## Anonyme (22 Février 2011)

C'est aussi une très mauvaise idée de supprimer le texte, il n'était pas mis là par hasard, les symboles étaient mis en image de fond. Les personnes malvoyantes utilisant une synthèse vocale *ont besoin du texte*.


----------



## fpoil (23 Février 2011)

Assez d'accord avec gloup gloup, il suffit de passer le texte dans les span de la couleur du fond de ta colonne de gauche, tu gardes le texte mais non visible.


----------



## dado (23 Février 2011)

Bonjour à tous,

Je vais donc appliquer la solution du texte invisible mais audible.

Entre les balises <span>, c'est fait.

Mais à la ligne ci-dessous, je n'ai pas trouvé comment marquer le code. 


```
$('#playpause span').text("Jouer");
```

Par ailleurs, gloup gloup, je n'ai pas compris ce que  tu entends par enlever l'outline.
Comment puis-je le restaurer ?

Merci et bonne journée.

dado


----------



## ladystordue (15 Août 2016)

Bonsoir ! 

Je débute à peine, et j'aimerais aussi profiter de la fonction "Play" sur le premier clique et "Stop" sur le second (sans affichage de texte, j'ai déja pu le coupler avec des hovers et images grace à un autre plug de jquerry). 

Je dispose pour l'instant de se code la : 

<audio id="do" preload="auto">   
        <source src="SON/TRACK001.mp3"></source>
        <source src="SON/TRACK001.ogg"></source>

    </audio>

<script>
var c_bouton1 = $("#do")[0];
$("#test")
.mousedown(function() {
c_bouton1.play();
});
</script>

quelqu'un pourrait il m'aider à le transformer un peu ?
En vous remerciant,
Très bonne soirée
Vic


----------



## momo-fr (17 Août 2016)

Salut, je ne comprend pas vraiment ta demande, tu utilises la balise audio HTML5 et tu ne veux pas utiliser le player (controls="controls") c'est ça ? 

Peut être une solution indiqué ici pour le transformer en boutons avec des CSS…


----------

