clic affichage /pas affichage

**qmulonainbus** · 21/09/2006, 12h10

Bonjour à tous!
J'ai une image qui jouera le role de bouton d'un côté, et de l'autre un div contenant un lecteur flash.
J'aimerais que lorsque je clique sur le bouton le div apparaisse
et lorsque je clique sur le div, que celui-ci ne disparaisse pas
c'est faisable en css?
j'ai un peu honte de ma question, mais je me suis réveillé avec la moitié de mes neurones :s

j'en suis à :

css

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
19
20
21
22
23
24
25
26
27
28
.FLVplayer 
  {
  width: 384px;
  height: 288px;
  display: block;
  text-align: center;
  border: 0px red;
  text-decoration: none;
  position:absolute;
  top:0px;
  left:0px;
  margin:0px 0px;
  z-index: 45;
 } 
 
 
.video
  {
  background-image: url(th007.jpg);
  position:absolute;
  background-repeat: no-repeat;
  top:8px;
  left:46px;
  width: 38px;
  height: 38px;
  padding: 0;
  z-index:60;
  }

html

Code :

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

1
2
3
4
5
6
7
8
9
10
<div class="video">
</div>
 
<div class="FLVplayer">
<object type="application/x-shockwave-flash" width="384" height="288" 
     wmode="transparent" data="flvplayer.swf?file=jfleroux_alice.FLV">
	<param name="movie" value="flvplayer.swf?file=jfleroux_alice.FLV" />
	<param name="wmode" value="transparent" />
</object>
</div>

un petit coup de main serait la bienvenue (un coup de poing moins

)

**Bisûnûrs** · 21/09/2006, 12h15

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.FLVplayer 
  {
  width: 384px;
  height: 288px;
  display: none;
  text-align: center;
  border: 0px red;
  text-decoration: none;
  position:absolute;
  top:0px;
  left:0px;
  margin:0px 0px;
  z-index: 45;
 }

Code :

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

1
2
3
4
5
6
7
8
9
10
<div class="video" onclick="showDiv();">
</div>

<div class="FLVplayer" id="monid">
<object type="application/x-shockwave-flash" width="384" height="288" 
     wmode="transparent" data="flvplayer.swf?file=jfleroux_alice.FLV">
	<param name="movie" value="flvplayer.swf?file=jfleroux_alice.FLV" />
	<param name="wmode" value="transparent" />
</object>
</div>

Code :

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

1
2
3
4
5
<script language="javascript">
function showDiv(){
   document.getElementById('monid').style.display = "block";
}
</script>

**qmulonainbus** · 21/09/2006, 15h15

yaoutch !!
super merci

ça fonctionne très bien!

t'aurais pas une astuce pour faire encore mieux, c'est à dire lorsque tu cliques hors-div ça fasse disparaitre la div? (je suis nul en javascript, dsl )
ou alors quelque chose dans le genre qui me permette de la retirer

pleease

s'il vous plait ...
toutes propositions, idées, est la bienvenue
help

**Kerod** · 21/09/2006, 19h01

Hummm. à tester : tu mets dans le body un onclick qui appel une fonction qui testera si ton élément est visible et si c'est le cas le fera disparaitre

**qmulonainbus** · 21/09/2006, 19h04

merci pour ta proposition

(je suis nul en javascript, dsl )

pourrais-tu m'en dire plus quand à la démarche à suivre (un ptit bout de code par exemple^^)
ps: je joue par au tire au flanc, hein!

**Kerod** · 21/09/2006, 19h18

ben tu l'as déjà plus haut c'est la même chose sauf qu'il faut le mettre aussi dans le <body>

Mais moi je remplacerai ceci :

Code :

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

document.getElementById('monid').style.display = "block";

par ceci :

Code :

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

document.getElementById('monid').style.display = (document.getElementById('monid').style.display == '')?"block":"";

Et que pour le body je ferai juste le test et qui cache avec ceci :

Code :

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

if(document.getElementById('monid').style.display == 'block') document.getElementById('monid').style.display = '';

**qmulonainbus** · 21/09/2006, 22h11

merci pour la ligne de code, cela apporte un élément de réponse à ma question

par contre

Code :

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

if(document.getElementById('monid').style.display == 'block') document.getElementById('monid').style.display = '';

si je le place dans le function showDiv(){, cela empeche la fermture du div par un reclic sur l'icone.
si je le met autre part dans le body, rien ne se passe :s

*gloups*

**Kerod** · 21/09/2006, 22h27

C'est bien ce que je pensais... le body annule tous les autres évènements. Donc tu auras beau mettre dans le body et cliquer sur le div tu verras jamais rien. Mais tu as deux possibilités :

Utiliser le onmouseout du div qui apparait et faire en sorte de tout faire disparaitre.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
```
onmouseout="if(document.getElementById('monid').style.display == 'block') document.getElementById('monid').style.display = 'none';"
```
utiliser le body et faire un test sur le positionnement de la souris et du div qui fait apparaitre ce qui peut être long comme code.

Si quelqu'un d'autre à une idée

**qmulonainbus** · 21/09/2006, 23h03

bon cela dit, le fait que le div apparaisse lors du clic et disparaisse lors dun 2ème clic est tout à fait acceptable

j'ai essayé le onmouse et rien ne se passe plus ... (bon je suis nul en javaS c'est pas nouveau)

merci pour la réponse

**Kerod** · 22/09/2006, 01h56

déjà c'est pas onmouse mais onmouseout. En ensuite ça fonctionne car je l'ai testé avant de te le donner

**qmulonainbus** · 22/09/2006, 11h09

oups

je ne remet pas ton code en question^^

c'est bien dans <script language="javascript"> qu'il faut mettre ta ligne?

**Kerod** · 22/09/2006, 11h19

Envoyé par Kerod

ben tu l'as déjà plus haut c'est la même chose sauf qu'il faut le mettre aussi dans le <body>

**qmulonainbus** · 22/09/2006, 11h48

ok ok
j'ai donc ça :

Code :

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

1
2
3
4
5
6
7
<script language="javascript">
function showDiv(){
 
  document.getElementById('monid').style.display = (document.getElementById('monid').style.display == '')?"block":"";
  onmouseout="if(document.getElementById('monid').style.display == 'block') document.getElementById('monid').style.display = 'none';"
}
</script>

et la nouvelle ligne de code ne change rien, c'est toujours un clic(=on un clic=off (clics sur le bouton)

**Kerod** · 22/09/2006, 11h51

Kerod a écrit :
ben tu l'as déjà plus haut c'est la même chose sauf qu'il faut le mettre aussi dans le <body>

Arff je m'en mêle ce matin. donc :

Code :

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

<div class="FLVplayer" id="monid" onmouseout="if(document.getElementById('monid').style.display == 'block') document.getElementById('monid').style.display = 'none';">

**qmulonainbus** · 22/09/2006, 12h00

super merci

juste un dernier truc,
la video saffiche, je retire la souris du div hop elle disparait

mais je dois faire 2 clic pour sur le bouton pour la relancer:
un clic ne suffit pas puisquil ne se passe rien
or au 2ème clic hop celà remarche

à quoi cela peut-il être du?

et il n'y a pas une commande genre onmouseclicover, pour que ce soit l'or du clic externe que ça disparaiisse? (j'en demande beaucoup je sais ^^)

**Kerod** · 22/09/2006, 12h03

Tout simplement à cause d'un mauvais test dans ta fonction

Code :

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

1
2
3
4
5
6
<script language="javascript">
function showDiv(){
 
  document.getElementById('monid').style.display = (document.getElementById('monid').style.display == 'none')?"block":"none";
}
</script>

**Bisûnûrs** · 22/09/2006, 12h06

Cf mon post dans ton autre topic.

Envoyé par Kerod

Tout simplement à cause d'un mauvais test dans ta fonction

Code :

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

1
2
3
4
5
6
<script language="javascript">
function showDiv(){
 
  document.getElementById('monid').style.display = (document.getElementById('monid').style.display == 'none')?"block":"none";
}
</script>

http://developpez.net/forums/showthread.php?t=213478

Il a surtout appelé ses deux div "monid".

**Kerod** · 22/09/2006, 12h09

Non il y en a qu'un seul...Et je vois pas comment la fonction pourrait marcher avec un test sur '' alors que c'est à none

**qmulonainbus** · 22/09/2006, 12h16

oui j'avais bien recopier comme un ane

bon j'avais 2 id identique, ce n'est plus le cas.

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="video" id="opa" onclick="showDiv();" onmouseover="opac()" onmouseout="opac()">
</div>
 
 
<div class="FLVplayer" id="monid"onmouseout="if(document.getElementById('monid').style.display == 'block') document.getElementById('monid').style.display = 'none';">
<object type="application/x-shockwave-flash" width="384" height="288" 
     wmode="transparent" data="flvplayer.swf?file=D/03/jflerouxphotoM.FLV&autostart=false&clicktext=Making-off  ( clic to play )">
	<param name="movie" value="flvplayer.swf?file=D/03/jflerouxphotoM.FLV&autostart=false&clicktext=Making-off  ( clic to play )" />
	<param name="wmode" value="transparent" />
</object>
</div>
 
 
<script language="javascript">
function showDiv(){
 
  document.getElementById('monid').style.display = (document.getElementById('monid').style.display == '')?"block":"";
 
 
  }
 
function opac(){
   if(document.getElementById("opa").style.filter == "alpha(opacity=100)"){
      document.getElementById("opa").style.filter = "alpha(opacity=10)";
      document.getElementById("opa").style.MozOpacity = "0.1";
      document.getElementById("opa").style.KhtmlOpacity = "0.1";
   }
   else{
      document.getElementById("opa").style.filter = "alpha(opacity=100)";
      document.getElementById("opa").style.MozOpacity = "1";
      document.getElementById("opa").style.KhtmlOpacity = "1";
   }
}
</script>

et

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.FLVplayer 
  {
  width: 384px;
  height: 288px;
  display: none;
  text-align: center;
  border: 0px red;
  text-decoration: none;
  position:absolute;
  top:150px;
  left:200px;
  margin:0px 0px;
  z-index: 89;
 }
 
.video
  {
  display:bloc;
  position:absolute;
  background-image: url(D/03/th008.gif);
  background-repeat: no-repeat;
  top:256px;
  left:815px;
  width: 38px;
  height: 38px;
  border:1px; 
  padding: 0;
  z-index:89;
  color:white;
  opacity:0.1; filter:alpha(opacity=10); -moz-opacity:0.1; -khtml-opacity:0.1
 
   }

voilà où j'en suis

symptomes :
-besoin de 2 clics sur le bouton pour réafficher la vidéo
-opacité qui perd la boule du moment que l'on clique sur le bouton

souhaits:
-que ça fasse disparaitre le div avec un clic et non un survol