Rendre le bouton invisible après le onclick !

Version imprimable

Bonjour à toutes et à tous,

Je ne sais pas si ce sujet à sa place en css ou javascript.

Sur ma page, j'ai deux boutons qui commande la balise "bgsound", un pour le play, l'autre pour le stop.

J'aimerai que lorsque je clique sur le bouton "Stop" qu'il soit invisible pour faire apparaitre le bouton "Play" comme cela, je pourrai les superposer.

J'ai essayé avec le style et hidden et pas d'effet.
Code:

1 2 3 4 5 6 7 8 9 10 11 <bgsound id="son" name="son" src="Musique/sound1.mid"></bgsound> </head> <body style="height: 750px;"> <button style="position: absolute; height: 20px; top: 750px; right: 100px; width: 53px;" name="stop" value="Stop" title="Arrêt de la musique !" onclick='document.getElementById("son").src="";'>Stop</button> <button style="position: absolute; height: 20px; top: 750px; left: 100px; width: 53px;" name="Play" value="Play" title="Lecture de la musique !" onclick='document.getElementById("son").src="Musique/sound1.mid";'>Play</button>
Merci pour l'aide éventuelle.

@+,

Cincap

08/05/2014, 11h31
sekaijin

Code:

< onclick="this.style.visibility='hidden';" >

@ sekaijin, merci de ta réponse, avec une petite fonction j'arrive à peu près a ce que j'aurai aimé comme résultat.

Le bouton "Stop" est visible et "Play" est caché.

Je clique sur le bouton "Stop", mon son s'arrête et le bouton "Play" s'affiche.

Mon souhait est que lorsque je clique sur le bouton "Stop", mon son s'arrête et le bouton "Play" s'affiche mais "Stop" doit être caché.

Si je clique sur le bouton "Play", mon son se fait entendre et le bouton "Stop" s'affiche et "Play" doit être caché
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <script language="javascript"> function newwindow() { var showme = document.getElementById("son"); showme.style.visibility = "visible"; } </script> <bgsound id="sonbis" name="son" src="Musique/sound1.mid"></bgsound> </head> <body style="height: 750px;"> <button id="son" style="position: absolute; height: 20px; top: 750px; right: 100px; width: 53px; visibility: hidden;" name="Play" value="Play" title="Lecture de la musique !" onclick='document.getElementById("sonbis").src="Musique/sound1.mid";'>Play</button> <button id="son" style="position: absolute; height: 20px; top: 750px; right: 170px; width: 53px;" name="Stop" value="Stop" title="Arrêt de la musique !" onclick='document.getElementById("sonbis").src="";newwindow()'>Stop</button>
Il y a certainement moyen de faire plus court.

@+,

Cincap

dans ce cas fais qu'un seul bouton

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  <script language="javascript">
  function sound() {
    var bgsound = document.getElementById("sonbis");
    if ("" == bgsound.src) {
      //il faut afficher le bouton Stop et jouer le son
      this.innerHtml = "Stop";
      this.title="Arr&ecirc;t de la musique !"
      bgsound.src="Musique/sound1.mid";
    } else {
      //il faut afficher le bouton Play et arrêter le son
      this.innerHtml = "Play";
      this.title="Lecture de la musique !"
      bgsound.src="";
    }
  }
  </script>
  <bgsound id="sonbis" name="son"></bgsound>
</head>
<body style="height: 750px;">
  <button id="Play_Stop"  title="Lecture de la musique !" onclick='return sound(this);'>Play</button>
</body>

08/05/2014, 16h22
cincap

@ sekaijin, grand merci pour cette solution, j'ai testé j'ai bien le bouton avec "Play" au départ, je clique j'ai le son mais même si le son est arrêté, le nom du bouton ne change pas en "Stop".

C'est peut être normal car je teste en local ?

A moins que j'ai loupé quelque chose.

@+,

Cincap

sorry j'ai écrit trop vite sans vérifier

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<script language="javascript">
  function sound(btn) {
    var bgsound = document.getElementById("sonbis");
    if ("" == bgsound.getAttribute("src")) {
      //il faut afficher le bouton Stop et jouer le son
      btn.innerHTML = "Stop";
      btn.title="Arr&ecirc;t de la musique !"
      bgsound.setAttribute("src","Musique/sound1.mid");
    } else {
      //il faut afficher le bouton Play et arrêter le son
      btn.innerHTML = "Play";
      btn.title="Lecture de la musique !"
      bgsound.setAttribute("src","");
    }
  }
  </script>
  <bgsound id="sonbis" name="son" src=""></bgsound>
</head>
<body style="height: 750px;">
  <button id="Play_Stop"  title="Lecture de la musique !" onclick='return sound(this);'>Play</button>
</body>
</html>

08/05/2014, 17h42
cincap

@ sekaijin, chapeau bas cher ami, j'ai examiné ton code afin de voir ou était l'erreur pour ne pas copier sans comprendre.

Ta solution est excellente.

Je peus fermer ce topic.

Grand merci.

@+,

Cincap
08/05/2014, 17h51
cincap

@ sekaijin, je viens de constater à l'instant que la 1ère fois au chargement de la page, il faut cliquer deux fois sur le bouton pour entendre le son et voir le "Stop".

A l'occasion si tu sais pourquoi.

@+,

Cincap
08/05/2014, 18h48
sekaijin

j'ai aussi corrigé une erreur dans la balise bgsound

Code:

<bgsound id="sonbis" name="son" src=""></bgsound>

l'as tu repotorté ?

sans ça l'attribut src n'est pas défini la première foi

A+JYT
08/05/2014, 20h24
cincap

C'était bien cela mon erreur, j'avais loupé cette petite modification, trop content que cela fonctionnait avec un seul bouton.

Chapeau bas et encore merci pour tes réponses.

@+,

cincap
09/05/2014, 08h13
cincap

Bonjour à toutes et à tous,

@ sekaijin, j'ai un petit Barr graph au format gif (soundon.gif), pour qu'il fonctionne avec ta solution, je dois l'insérer dans le code Jvs ou dans la partie "body".

En position off il ne doit pas être afficher, dès le click sur "Play" il doit s'afficher.

As tu une idée.

en te remerciant encore pour ta patience.

@+,

Cincap

1 pièce(s) jointe(s)

Exemple concret avec vumetre !

@ sekaijin,

Voila mon test avec l'image, cela fonctionne mais si il y a une erreur de professionnalisme, n'hésitez pas.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<script language="javascript">
function sound(btn) {
var bgsound = document.getElementById("sonbis");
if ("" == bgsound.getAttribute("src")) {
//il faut afficher le bouton Stop et jouer le son
btn.innerHTML = "Stop";
btn.title="Arrêt de la musique !"
bgsound.setAttribute("src","Musique/sound1.mid");
//affichage de l'image
document.getElementById("bg").style.visibility="visible"; } 
else {
//il faut afficher le bouton Play et arrêter le son
btn.innerHTML = "Play";
btn.title="Lecture de la musique !"
bgsound.setAttribute("src","");
//image cachée
document.getElementById("bg").style.visibility="hidden";
}
}
  </script><bgsound
 id="sonbis" name="son" src=""></bgsound>
</head>
<body
 style="background-repeat: repeat; background-attachment: scroll; background-position: 0% 50%; height: 
 
750px; background-image: url(none);">
<button id="Play_Stop" title="Lecture de la musique !"
 onclick="return sound(this);">Play</button>
<br>
<br>
<img id="bg" src="soundon.gif" ; style="position: absolute; right: 145px; top: 725px; visibility: hidden;">

@+,

Cincap