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

onclick annule onmouseout

JavaScript

Vue hybride

Discussions similaires

Partager

Partager