clic affichage /pas affichage

Version imprimable

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 ?
22/09/2006, 12h41
qmulonainbus

Citation:

De quel div tu parles ? Si c'est celui de FLVplayer, c'est déjà le cas, non ?

non, le flv player disparait quand la souris sort de la zone du div :s
j'aimerais que ce soit lorsque l'on clique hors de ce div(FLVplayer)

Code:

-opacité qui perd la boule du moment que l'on clique sur le bouton Aucun problème

après purge du cache FFox, cela fonctionne bien :) donc aucun pb

Citation:

-besoin de 2 clics sur le bouton pour réafficher la vidéo Aucun problème

8O cela me laisse perplexe, qu'entends tu par aucun pb? car cela persiste

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>
j'ai pourtant dit que ca vient de la fonction mais bon on me croit pas :?

22/09/2006, 12h50
qmulonainbus

moi je veux bien te croire,

as-tu une solution de remplacement?
22/09/2006, 13h28
Kerod

Si tu parles du code de remplacement de la fonction je te l'ai déjà donné 2 fois
22/09/2006, 13h53
qmulonainbus

dans l'empressement je n'avais pas fait attention à la fin de ton code:oops:
merci :)

bon pour un nouveau pb : il faut 2 clic pour lancer la toute première fois la vidéo. après non..

je rencontre un problème :
je voudrais avoir 2 boutons, qui chacun lanceront le div video associé.
Jusqu'à la théorie ça va, mais la pratique non :
j'ai créer les div nécessaires ( 2div boutons et 2div videos), mais lorsque je veux faire de même avec le code javascript (id différent bien sur), j'ai le problème suivant: seul le dernier code est actif, c'est à dire que je clique sur l'ancien bouton ou le nouveau, [apparement le navigateur (FFox) considère cela comme un seul bouton à 2 endroits] la div video n°2 se lance....

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<style>
.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;
 }
 
 .FLV2 
  {
  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;
 }
 
.espoir
  {
  display:bloc;
  position:absolute;
  background-image: url(B/01/th001.jpg);
  background-repeat: no-repeat;
  top:256px;
  left:815px;
  width: 170px;
  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
 
   }
  .anim
  {
  display:bloc;
  position:absolute;
  background-image: url(B/01/th002.jpg);
  background-repeat: no-repeat;
  top:296px;
  left:505px;
  width: 170px;
  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
 
   }
</style>

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<div class="espoir" id="opa" onclick="showDiv();" onmouseover="opac()" onmouseout="opac()">
</div>
 
<div class="anim" id="T2" onclick="showDiv();" onmouseover="opac()" onmouseout="opac()">
</div>
 
 
<div class="FLVplayer" id="monid">
<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>
Photo-montage <br>"Am&eacute;lioration d'un lieu".
</div>
 
<div class="FLV2" id="m2">
<object type="application/x-shockwave-flash" width="384" height="288" 
     wmode="transparent" data="flvplayer.swf?file=D/03/jflerouxphotoM2.FLV&autostart=false&clicktext=Making-off  ( clic to play )">
	<param name="movie" value="flvplayer.swf?file=D/03/jflerouxphotoM2.FLV&autostart=false&clicktext=Making-off  ( clic to play )" />
	<param name="wmode" value="transparent" />
</object>
Photo-montage <br>"Am&eacute;lioration d'un lieu".hierhvihzveizreef
</div>
 
 
<script language="javascript">
function showDiv(){
 
  document.getElementById('monid').style.display = (document.getElementById('monid').style.display == 'none')?"block":"none";
 
 
  }
 
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";
   }
 
 
}
 
function showDiv(){
 
  document.getElementById('m2').style.display = (document.getElementById('m2').style.display == 'none')?"block":"none";
 
 
  }
 
function opac(){
   if(document.getElementById("T2").style.filter == "alpha(opacity=100)"){
      document.getElementById("T2").style.filter = "alpha(opacity=10)";
      document.getElementById("T2").style.MozOpacity = "0.1";
      document.getElementById("T2").style.KhtmlOpacity = "0.1";
   }
   else{
      document.getElementById("T2").style.filter = "alpha(opacity=100)";
      document.getElementById("T2").style.MozOpacity = "1";
      document.getElementById("T2").style.KhtmlOpacity = "1";
   }
 
 
}
</script>

à l'aide :( s'il vous plait
c'est surement un bête truc que j'ai pas capté
toute hypothèses, idée ou solutions est la bienvenue...please

23/09/2006, 17h11
qmulonainbus

je me noie là...je comprends plus
25/09/2006, 11h48
qmulonainbus

il y a quelqu'un?

help
26/09/2006, 18h18
qmulonainbus

bon apparement je demande la lune....
26/09/2006, 19h58
Kerod

Ton réel problème est que tu as deux fois la meme fonction défini donc ......
26/09/2006, 22h58
qmulonainbus

merci pour ton éclairage
donc la solution serait de renommer une des 2 function showDiv(){
en par exemple function showDiv2(){
?
je débute je suis désolé si ça vous parait évident, moi pas ... :s
26/09/2006, 23h32
Kerod
ou faire une seule fonction prennant comme parametre un id et l'appel se ferait avec l'id souhaité. Un peu comme ceci :
Code:

1 2 3 4 5 6 function showDiv(lid){ document.getElementById(lid).style.display = (document.getElementById('lid').style.display == 'none')?"block":"none"; }
et l'appel par exemple :

Code:

onclick="showDiv('monid');"