onclick annule onmouseout

**pito2901** · 14/09/2013, 19h24

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

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

**NoSmoking** · 15/09/2013, 08h59

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.

**pito2901** · 15/09/2013, 10h29

Heu là je ne comprends rien du tout

**NoSmoking** · 15/09/2013, 12h35

Oui bon...!

en mode code cela peut se traduire par

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

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

**pito2901** · 15/09/2013, 13h14

Vous gérez à mort !

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

**NoSmoking** · 15/09/2013, 15h31

Envoyé par pito2901

Vous gérez à mort !

merci d'en parler à mon banquier

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 :

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

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

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

1
2
3
4
5
6
7
<!-- 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. -->

**pito2901** · 15/09/2013, 16h17

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 ?

**NoSmoking** · 15/09/2013, 17h08

Pas sûr que tu puisses récupérer un événement qui ce produit sur l'objet inséré dans ton IFRAME.

**pito2901** · 15/09/2013, 17h14

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 ?

**pito2901** · 16/09/2013, 20h43

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

Code css :

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
#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 html :

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

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 :

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

**NoSmoking** · 17/09/2013, 20h10

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.

**pito2901** · 17/09/2013, 21h21

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 :

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

**SylvainPV** · 17/09/2013, 23h03

Un ID doit être unique dans la page.

**pito2901** · 18/09/2013, 13h31

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 ?

**NoSmoking** · 18/09/2013, 19h10

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.

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

Rien compris mais essaies de ne pas te disperser!

**pito2901** · 18/09/2013, 20h08

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.

**NoSmoking** · 21/09/2013, 08h04

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

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

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

**pito2901** · 21/09/2013, 10h05

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.

**pito2901** · 21/09/2013, 11h31

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

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

**NoSmoking** · 22/09/2013, 17h03

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.

Petit rappel :
- Les règles
- Lycéen, collégien, étudiant, (bref un apprenti développeur)

onclick annule onmouseout

JavaScript

Discussions similaires

Partager

Partager