onclick annule onmouseout

Version imprimable

Bonjour à tous !

Débutant dans la programmation et surtout dans le javascript, je recherche le code qui permet de résoudre ce problème:

1° Je dispose d'un div contenant une vidéo youtube, donc un iframe.

2° Le code CSS que j'ai appliqué permet d'ouvrir ce div et de pouvoir lire la vidéo mais en laissant le curseur de la souris dans cette zone (via le :hover)

3° Ce que je recherche, c'est le code et comment l'appliquer pour qu'à un seul clic, qui déclenchera la lecture de la vidéo, le div reste ouvert, mais s'il n'y a pas de clic, le div se referme.

Voici mon code html et css réunis ici (codepen n'affiche pas les vidéo, mais un clic dans sa zone de celle-ci déclenchera sa lecture)

Voici la page concernée

A present j'obtiens ce code qui ne réponds pas à tous mes critères je demande donc votre aide:

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
<!-- De base : ta vidéo est affichée entièrement.
 
En JS : tu la caches.
 
Avec l'évènement mouseover, tu détectes le passage de la souris sur le div contenant l'iframe pour l'ouvrir.
 
Tu crées une variable valant false au départ.
 
Avec l'évènement onclick, tu détectes le lancement de la vidéo. Tu passes ta variable à true.
 
Lors de l'évènement onmouseout, tu regardes si l'utilisateur a cliqué, c'est-à-dire si la variable est à true ou non.
 
Tu agis en conséquence. -->
 
<head>
<script type="text/javascript">
function visibilite(divideo)
{
var titre;
titre = document.getElementById(divideo) ;
if (titre.style.display == "none")
{titre.style.display = "" ;}
else
{titre.style.display = "none" ;}
}
function value(video) {
var lecture;
lecture = document.getElementById(video) ;
    if (titre.style.display == "none")
    {lecture.value = "false" ;}
    else
    {
        if (lecture.value == "true")
        {titre.style.display = "";}
        else
        {titre.style.display = "none";}
    }
}
</script>
 
<style>
.block_video{
width:900px; height:524px; overflow:hidden;
border: 1px solid #0060F0; border-radius: 5px;
}
.video{
width:900px; height:524px; overflow:hidden;
}
iframe{
height:506px; width:100%;
}
a{color:red;text-decoration:none;}
a:hover{color:green;text-decoration:none;}
</style>
</head>
<body>
 
<div class="block_video">
<a href="" onmouseover="javascript:visibilite('divideo'); return false;" >Video d'exemple</a>
<div id="divideo" class="video" style="display:none">
<iframe id="video" onclick="javascript:video('lecture'); return true;" frameborder="0" src="http://www.youtube.com/embed/1cefBcHaz_U"></iframe>
</div>
</div>
 
</body>

15/09/2013, 08h59
NoSmoking

Bonjour,
il te suffit peut être de gérer un flag que tu places à true si il y a eu un clic, dans ce cas sur le mouseout si le flag est posé tu ne fais rien dans le cas contraire tu refermes la div.
15/09/2013, 10h29
pito2901

Heu là je ne comprends rien du tout 8O

Oui bon...!

en mode code cela peut se traduire par

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var oDiv = document.getElementById('la_div');
oDiv.onclick = function(){
  // à chaque clic on inverse la valeur du flag false/true
  this.flag = !this.flag;
};
oDiv.onmouseover = function(){
  // affiche la div via une height en auto
  this.style.height = 'auto';
};
oDiv.onmouseout = function(){
  // si le flag vaut false on réduit la hauteur de la fenêtre
  if( !this.flag){
    this.style.height = '32px';
  }
};

et un petit fichier de test

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>onclick,onmouseover et onmouse out</title>
<style>
#la_div{
  height:32px;
  width:500px;
  border:1px solid #888;
  overflow:hidden;
}
#la_div h1{
  background:#EEE;
  margin:1px;
  line-height:32px;
  font-size:26px;
}
</style>
</head>
<body>
<div id="la_div">
  <h1>Le titre</h1>
  <p>1st paragraphe</p>
  <p>2nd paragraphe</p>
</div>
<script>
var oDiv = document.getElementById('la_div');
oDiv.onclick = function(){
  // à chaque clic on inverse la valeur du flag false/true
  this.flag = !this.flag;
};
oDiv.onmouseover = function(){
  // affiche la div via une height en auto
  this.style.height = 'auto';
};
oDiv.onmouseout = function(){
  // si le flag vaut false on réduit la hauteur de la fenêtre
  if( !this.flag){
    this.style.height = '32px';
  }
};
</script>
</body>
</html>

15/09/2013, 13h14
pito2901

Vous gérez à mort ! :ccool:
Mais est-il possible qu'une fois le clic fait, n'importe où sur le div, ensuite on ne puisse plus le fermer ?

Citation:

Envoyé par pito2901

Vous gérez à mort ! :ccool:

merci d'en parler à mon banquier :ptdr:

Citation:

Envoyé par pito2901

Mais est-il possible qu'une fois le clic fait, n'importe où sur le div, ensuite on ne puisse plus le fermer ?

il suffit de ne pas modifier la valeur du flag à chaque clic.
Code:

1 2 3 4 oDiv.onclick = function(){ // mise du flag à true à perpette this.flag = true;// !this.flag; };
[EDIT]
J'ai l'impression d'avoir enfoncé des portes ouvertes.
Lu dans les commentaires de la source que tu as fourni dans le premier post.
Code:

1 2 3 4 5 6 7 

15/09/2013, 16h17
pito2901

Un dernier souci, est il possible que la div reste ouverte non pas en cliquant sur sa surface mais en cliquant sur le iframe. Car dans votre code il n'y a aucun iframe ?
15/09/2013, 17h08
NoSmoking

Pas sûr que tu puisses récupérer un événement qui ce produit sur l'objet inséré dans ton IFRAME.
15/09/2013, 17h14
pito2901

peux t-on rajouter un bouton lecture en plein milieu de la vidéo, qui déclencherait cet événement, puis ensuite disparaîtrait.

et comment animer le height, faire une transition de 18px à 524px ?

C'est un début, mais en cherchant un peu j'ai ça:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#la_div{
  height:18px;
  width:900px;
  border:1px solid black;
  border-radius:5px;
  overflow:hidden;
}
#la_div h1{
  background:red;
  margin:0px;
  line-height:18px;
  font-size:16px;
}
#la_div iframe{
	position:absolute;
	z-index:5000;
}
#la_div img{
	position:absolute;
	z-index:6000;
}

Code:

1
2
3
4
5
<div id="la_div">
<h1>&nbsp;Changer le volume d'une chanson et l'exporter en mp3</h1>
<iframe id="la_video" frameborder="0" height="506" src="http://www.youtube.com/embed/1cefBcHaz_U" width="900px"></iframe>
<img id="bouton_lecture" src="https://12a14af8-a-62cb3a1a-s-sites.googlegroups.com/site/resolutionrubikscube3x3x3/boutonlecture.png"></img>
</div>

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
var Div = document.getElementById('la_div');
var Video = document.getElementById('la_video');
var BTL = document.getElementById('bouton_lecture');
 
Video.style.display			=			'none';
BTL.style.display			=			'none';
 
BTL.onclick = function(){
  BTL.flag = true;
};
Div.onmouseover = function(){
  this.style.height = '524px';
  Video.style.display = '';
 
  BTL.style.display 		= 	'';
  BTL.style.top				=	'50px';
  BTL.style.left			=	'50px';
  BTL.style.cursor			= 	'pointer';
};
Div.onmouseout = function(){
  if( !BTL.flag){
  this.style.height = '18px';
  Video.style.display 	= 	'none';
  BTL.style.display 	= 	'none';
  }
};

Alors ? Qu'en pensez vous ?

17/09/2013, 20h10
NoSmoking

C'est un bon début mais il te faudra passer en paramètre à ta vidéo wmode=transparent pour que tu puisses mettre ton bouton sur le dessus.

Quelle méthode vas tu adopter pour déclencher ta vidéo?

Peux être devrais tu regarder du coté des API vidéo.

J'obtiens ça mais il faut donc effectuer un double clic pour lancer la lecture de la vidéo et je ne comprends pas pourquoi le code ne s'applique pas sur plusieurs div (la_div):

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
<style>
#la_div{
  height:18px;
  width:900px;
  border:1px solid black;
  border-radius:5px;
  overflow:hidden;
}
#la_div h1{
  background:red;
  margin:0px;
  line-height:18px;
  font-size:16px;
}
#la_div #bouton_lecture{
  margin:auto;
  position:relative;
}
 
</style>
</head>
 
<body>
<div id="la_div">
<h1>&nbsp;Changer le volume d'une chanson et l'exporter en mp3</h1>
<iframe id="la_video" frameborder="0" height="506" src="http://www.youtube.com/embed/1cefBcHaz_U" width="900px"></iframe>
<img id="bouton_lecture" src="https://12a14af8-a-62cb3a1a-s-sites.googlegroups.com/site/resolutionrubikscube3x3x3/boutonlecture.png"></img>
</div>
<br />
<div id="la_div">
<h1>&nbsp;Exemple</h1>
<iframe id="la_video" frameborder="0" height="506" src="http://www.youtube.com/embed/RFHEA54RXTI" width="900px"></iframe>
<img id="bouton_lecture" src="https://12a14af8-a-62cb3a1a-s-sites.googlegroups.com/site/resolutionrubikscube3x3x3/boutonlecture.png"></img>
</div>
 
<script>
var Div = document.getElementById('la_div');
var Video = document.getElementById('la_video');
var BTL = document.getElementById('bouton_lecture');
var MS = document.getElementById('message_survol');
 
Div.style.cssText			=			'transition:height 1s;-moz-transition:height 1s;-webkit-transition:height 1s;-o-transition:height 1s;';
Video.style.display			=			'';
BTL.style.display			=			'';
 
BTL.onclick = function(){
  BTL.flag = true;
  BTL.style.visibility='hidden';
};
Div.onmouseover = function(){
  this.style.height 		= 	'524px';
 
  BTL.style.height			=	'506px';
  BTL.style.width			=	'900px';
  BTL.style.bottom			=	'505px';
  BTL.style.left			=	'0px';
  BTL.style.cursor			= 	'pointer';
};
Div.onmouseout = function(){
  if( !BTL.flag){
  this.style.height 		=	'18px';
  }
};
</script>
</body>

Merci de votre réponse

17/09/2013, 23h03
SylvainPV

Un ID doit être unique dans la page.
18/09/2013, 13h31
pito2901

Merci, y'a t-il un moyen d'appliquer le code sur plusieurs div alors ?

et peux t'on rendre la double action du clic en un ?
18/09/2013, 19h10
NoSmoking

Citation:

Envoyé par pito2901

Merci, y'a t-il un moyen d'appliquer le code sur plusieurs div alors ?

OUI, il te suffit de récupérer les éléments sur lesquels tu veux appliquer ces actions et de les initialiser dans une boucle.

Citation:

et peux t'on rendre la double action du clic en un ?

Rien compris mais essaies de ne pas te disperser!
18/09/2013, 20h08
pito2901

Heu ??? Comment on fait ça avec une boucle, quelle sorte de boucle ? For, If ?

Et pour la deuxième question, ce n'est pas grave j'ai trouvé une autre solution.

Citation:

...quelle sorte de boucle ? For, If ?

Là c'est pas gagné ;)

Tu peux tirer avantage de l'utilisation de la méthode querySelectorAll.

Sur base du code que je t'ai mis plus avant, il suffit de mettre une même class sur tes DIVs pour pouvoir les récupérer via la méthode querySelectorAll, cela va se traduire par var oDiv = document.querySelectorAll('.la_div');, ici la class à pour nom la_div.

Pour le reste c'est la même chose mais dans une boucle for, la fonction devient donc

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var oDiv = document.querySelectorAll('.la_div');
var nb= oDiv.length;
for( i=0; i< nb; i++){
  oDiv[i].onclick = function(){
    // à chaque clic on inverse la valeur du flag false/true
    this.flag = !this.flag;
  };
  oDiv[i].onmouseover = function(){
    // affiche la div via une height en auto
    this.style.height = 'auto';
  };
  oDiv[i].onmouseout = function(){
    // si le flag vaut false on réduit la hauteur de la fenêtre
    if( !this.flag){
      this.style.height = '32px';
    }
  };
}

re exemple complet :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>onclick,onmouseover et onmouse out</title>
<style>
.la_div{
  height:32px;
  width:500px;
  border:1px solid #888;
  overflow:hidden;
  margin:1em;
}
.la_div h1{
  background:#EEE;
  margin:1px;
  line-height:32px;
  font-size:26px;
}
</style>
</head>
<body>
<div class="la_div">
  <h1>Le titre #1</h1>
  <p>1st paragraphe</p>
  <p>2nd paragraphe</p>
</div>
<div class="la_div">
  <h1>Le titre #2</h1>
  <p>1st paragraphe</p>
  <p>2nd paragraphe</p>
</div>
 
<script>
var oDiv = document.querySelectorAll('.la_div');
var nb= oDiv.length;
for( i=0; i< nb; i++){
  oDiv[i].onclick = function(){
    // à chaque clic on inverse la valeur du flag false/true
    this.flag = !this.flag;
  };
  oDiv[i].onmouseover = function(){
    // affiche la div via une height en auto
    this.style.height = 'auto';
  };
  oDiv[i].onmouseout = function(){
    // si le flag vaut false on réduit la hauteur de la fenêtre
    if( !this.flag){
      this.style.height = '32px';
    }
  };
}
</script>
</body>
</html>

21/09/2013, 10h05
pito2901

Le code ne marche pas.

la boucle for est utile ou non ?

et dans votre code, le onclick ne permet pas de "bloquer" la valeur sur true, c'est à dire, qu'une fois le clic fait la div reste ouverte.

et pour l'amour du ciel, pouvez vous appliquer votre code sur le mien, s'il vous plaît.

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>
#la_div{
  height:18px;
  width:900px;
  border:1px solid black;
  border-radius:5px;
  overflow:hidden;
}
#la_div h1{
  background:red;
  margin:0px;
  line-height:18px;
  font-size:16px;
}
#la_div #bouton_lecture{
  margin:auto;
  position:relative;
}
 
</style>
</head>
 
<body>
<div id="la_div">
<h1>&nbsp;Changer le volume d'une chanson et l'exporter en mp3</h1>
<iframe id="la_video" frameborder="0" height="506" src="http://www.youtube.com/embed/1cefBcHaz_U" width="900px"></iframe>
<img id="bouton_lecture" src="https://12a14af8-a-62cb3a1a-s-sites.googlegroups.com/site/resolutionrubikscube3x3x3/boutonlecture.png"></img>
</div>
<br />
<div id="la_div">
<h1>&nbsp;Exemple</h1>
<iframe id="la_video" frameborder="0" height="506" src="http://www.youtube.com/embed/RFHEA54RXTI" width="900px"></iframe>
<img id="bouton_lecture" src="https://12a14af8-a-62cb3a1a-s-sites.googlegroups.com/site/resolutionrubikscube3x3x3/boutonlecture.png"></img>
</div>
 
<script>
var Div = document.getElementById('la_div');
var Video = document.getElementById('la_video');
var BTL = document.getElementById('bouton_lecture');
var MS = document.getElementById('message_survol');
 
Div.style.cssText			=			'transition:height 1s;-moz-transition:height 1s;-webkit-transition:height 1s;-o-transition:height 1s;';
Video.style.display			=			'';
BTL.style.display			=			'';
 
BTL.onclick = function(){
  BTL.flag = true;
  BTL.style.visibility='hidden';
};
Div.onmouseover = function(){
  this.style.height 		= 	'524px';
 
  BTL.style.height			=	'506px';
  BTL.style.width			=	'900px';
  BTL.style.bottom			=	'505px';
  BTL.style.left			=	'0px';
  BTL.style.cursor			= 	'pointer';
};
Div.onmouseout = function(){
  if( !BTL.flag){
  this.style.height 		=	'18px';
  }
};
</script>
</body>

Merci.

22/09/2013, 17h03
NoSmoking

Citation:

et pour l'amour du ciel, pouvez vous appliquer votre code sur le mien, s'il vous plaît.

je ne vois pas une once de travail de ta part sur cette transposition de code.

Fais donc l'effort d’appliquer l'exemple à ton besoin, cela ne devrait pas être trop dur, ensuite on reparlera de la deuxième problématique.

Un indice, même si je fini par douter que cela serve, délégation d'événement, on en a parlé il y à peu sur le forum.

:zzz: Petit rappel :
- Les règles
- Lycéen, collégien, étudiant, (bref un apprenti développeur)
22/09/2013, 17h32
pito2901

Et bien si vous ne voyez pas de travail, il faut vous achetez des lunettes, et je sais très bien que vous ne voulez pas faire nos exercices, or ce n'est absolument pas ce que je demande.
22/09/2013, 18h40
NoSmoking

Citation:

il faut vous achetez des lunettes

non merci je suis déjà équipé :D

Si je me suis permis ces remarques, c'est qu'à l'observation des codes du 17/09/2013, 21h21 et celui du 22/09/2013, 11h31 je n'ai constaté AUCUNE différence, même pas un espace en plus ou en moins.

Adapter le code que j'ai fourni aux besoins aurait, au moins été une preuve de bonne volonté et peut être même que la solution serait apparue à l'aide de l'indice.

Citation:

Envoyé par pito2901

je sais très bien que vous ne voulez pas faire nos exercices, or ce n'est absolument pas ce que je demande.

il me semblait avoir lu

Citation:

Envoyé par pito2901

et pour l'amour du ciel, pouvez vous appliquer votre code sur le mien, s'il vous plaît.

:calim2: mes trois foyers ne suffisent-ils pas ?
22/09/2013, 19h13
pito2901

Oui bon vous voulez aider mais pas faire un chouia...
22/09/2013, 21h28
NoSmoking

Citation:

...vous voulez aider mais pas faire un chouia...

et en plus tu as un sens de l'humour super aiguisé :ave:

Bon souhaitez-vous encore m'aider, il n'y a que ça qui fonctionne, je n'arrive pas à appliquer votre queryselectorall ou autre instructions... :calim2:

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>onclick,onmouseover et onmouse out</title>
<style>
#vsurvol1,
#vsurvol2{
  height:18px;
  width:900px;
  border:1px solid black;
  border-radius:5px;
  overflow:hidden;
}
#vsurvol1 h1,
#vsurvol2 h1{
  margin:0px;
  line-height:18px;
  font-size:16px;
}
#vsurvol1 #bouton_lecture1,
#vsurvol2 #bouton_lecture2{
  margin:auto;
  position:relative;
}
</style>
</head>
 
<body>
<div id="vsurvol1">
<h1>&nbsp;Changer le volume d'une chanson et l'exporter en mp3</h1>
<iframe id="video1" frameborder="0" height="506" src="http://www.youtube.com/embed/1cefBcHaz_U" width="900px"></iframe>
<img id="bouton_lecture1" src="https://12a14af8-a-62cb3a1a-s-sites.googlegroups.com/site/resolutionrubikscube3x3x3/boutonlecture.png"></img>
</div>
<br />
<div id="vsurvol2">
<h1>&nbsp;Exemple</h1>
<iframe id="video2" frameborder="0" height="506" src="http://www.youtube.com/embed/RFHEA54RXTI" width="900px"></iframe>
<img id="bouton_lecture2" src="https://12a14af8-a-62cb3a1a-s-sites.googlegroups.com/site/resolutionrubikscube3x3x3/boutonlecture.png"></img>
</div>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
// Voir code JS
</script>
</body>
</html>

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
var Div1 = document.getElementById('vsurvol1');
var Video1 = document.getElementById('video1');
var BTL1 = document.getElementById('bouton_lecture1');
 
Div1.style.cssText           =           'transition:height 1s;-moz-transition:height 1s;-webkit-transition:height 1s;-o-transition:height 1s;';
Video1.style.display         =           '';
BTL1.style.display           =           '';
 
BTL1.onclick = function(){
  BTL1.flag = true;
  BTL1.style.visibility='hidden';
};
Div1.onmouseover = function(){
  this.style.height         =   '524px';
 
  BTL1.style.height          =   '506px';
  BTL1.style.width           =   '900px';
  BTL1.style.bottom          =   '505px';
  BTL1.style.left            =   '0px';
  BTL1.style.cursor          =   'pointer';
};
Div1.onmouseout = function(){
  if( !BTL1.flag){
  this.style.height         =   '18px';
  }
};
var Div2 = document.getElementById('vsurvol2');
var Video2 = document.getElementById('video2');
var BTL2 = document.getElementById('bouton_lecture2');
 
Div2.style.cssText           =           'transition:height 1s;-moz-transition:height 1s;-webkit-transition:height 1s;-o-transition:height 1s;';
Video2.style.display         =           '';
BTL2.style.display           =           '';
 
BTL2.onclick = function(){
  BTL2.flag = true;
  BTL2.style.visibility='hidden';
};
Div2.onmouseover = function(){
  this.style.height         =   '524px';
 
  BTL2.style.height          =   '506px';
  BTL2.style.width           =   '900px';
  BTL2.style.bottom          =   '505px';
  BTL2.style.left            =   '0px';
  BTL2.style.cursor          =   'pointer';
};
Div2.onmouseout = function(){
  if( !BTL2.flag){
  this.style.height         =   '18px';
  }
};

Je vous remercie d'avance.