Bouton Javascript à double commande

dado

dado

Membre actif
19 Mai 2005
164
5
77
Neuville sur Sarthe
damier.manceau.free.fr
Bonjour à tous,

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

Bloc de code: 
<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 :zen:
dado
 
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.
 
Un exemple
Ca doit donner chez toi quelque chose dans le genre, en très raccourci :
Bloc de code: 
<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>
 
Merci ntx d'avoir bien voulu expliciter ta réponse. J'effectue le test demain et te tiens au courant

dado
 
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
 
Voici le code corrigé et qui marche :
Bloc de code: 
<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 :zen:
 
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
 
Perso j'utiliserais le même bouton avec changement du nom et image de fond :

Bloc de code: 
<!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. ;)
 
J'aurais presque dit la même chose mais charger tout jquery pour un bouton...
 
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
 
pour le test1 :
Bloc de code: 
<!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
 
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 :

Bloc de code: 
<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 :zen:

dado
 
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
 
1) il y a des erreurs dans le code que j'ai copié...désolé, dans la première ligne de la "css" :

Bloc de code: 
#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 :

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

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

Bloc de code: 
$('#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]
});
 
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. ;)
 
Bravo fpoil :up:

- 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
 
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. :rolleyes:
 
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.
 

Sujets similaires

Morebany
[HTML5]jouer/stopper/rejouer... sa webcam
Réponses
1
Affichages
2K
Développement web
Morebany
Morebany
I
Popup video
Réponses
1
Affichages
2K
Développement web
WebD
WebD
Haut Bas