clic affichage /pas affichage

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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:

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 ;) )

Code:

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:

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:

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

21/09/2006, 15h15
qmulonainbus

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 :(:(
21/09/2006, 19h01
Kerod

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
21/09/2006, 19h04
qmulonainbus

merci pour ta proposition :)

Citation:

(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!
21/09/2006, 19h18
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> 8O

Mais moi je remplacerai ceci :

Code:

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

par ceci :

Code:

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:

if(document.getElementById('monid').style.display == 'block') document.getElementById('monid').style.display = '';
21/09/2006, 22h11
qmulonainbus

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

Code:

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*
21/09/2006, 22h27
Kerod
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:
  
  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 :roll:
21/09/2006, 23h03
qmulonainbus

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 ;)
22/09/2006, 01h56
Kerod

déjà c'est pas onmouse mais onmouseout. En ensuite ça fonctionne car je l'ai testé avant de te le donner :roll:
22/09/2006, 11h09
qmulonainbus

oups :)
je ne remet pas ton code en question^^

c'est bien dans <script language="javascript"> qu'il faut mettre ta ligne?
22/09/2006, 11h19
Kerod

Citation:

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>

ok ok
j'ai donc ça :

Code:

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)

22/09/2006, 11h51
Kerod

Citation:

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:

<div class="FLVplayer" id="monid" onmouseout="if(document.getElementById('monid').style.display == 'block') document.getElementById('monid').style.display = 'none';">
22/09/2006, 12h00
qmulonainbus

super merci :D

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 ^^)

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

Code:

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>

22/09/2006, 12h06
Bisûnûrs
Cf mon post dans ton autre topic.
Citation:
Envoyé par Kerod

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

Code:

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>
:arrow: http://developpez.net/forums/showthread.php?t=213478

Il a surtout appelé ses deux div "monid".
22/09/2006, 12h09
Kerod

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

oui j'avais bien recopier comme un ane :oops:

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

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
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>

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

22/09/2006, 12h31
Bisûnûrs

Avec ton code actuel :

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

souhaits:
-que ça fasse disparaitre le div avec un clic et non un survol :fleche: De quel div tu parles ? Si c'est celui de FLVplayer, c'est déjà le cas, non ?

Voir 40 message(s) de cette discussion en une page