Conflit entre deux onmouseover et deux onmouseout

Version imprimable

Bonjour à tous.

J'ai un souci avec ce code.
avec les 2 onmouseover et les 2 onmouseout
dans chaque élément de la table.

Le but recherché du javascript :
Passer avec la souris sur l'image...
Alors s'affiche une petite image en z-index supérieur !
Ensuite, quand je passe avec la souris sur la petite image,
la grande image (du fond) change...
Je mets la souris hors de la petite image,
l'image de fond redevient comme avant !
Je quitte le survol de la grande image,
le petit cadre avec la petite photo disparaît !

Mais on dirait, chez moi,
que le javascript boucle !
Pourquoi ?

Apparemment, le onmouseover et on mouseout se déclenchent quand je passe d'un enfant de l'élément sur lequel est appliqué l'évènement à un autre, ou tout simplement de l'enfant vers le parent.

Mais comment faire, alors ?

Pouvez-vous et pouvez-vous m'aider ?
D'avance, merci.

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
72
73
74
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<style type="text/css">
<!--
.case {
	width: 235px;
	height: 300px;
	border: 1px;
	border-color: #CBCACA;
	border-style: solid;
	padding: 0px 5px 0px 5px;
	margin: 0px 20px 10px 0px;
}
.miniature {
	position: relative;
	top: 155px;
	left: 160px;
	width: 70px;
	height: 70px;
	z-index: 100;
	border: 1px;
	border-color: #CBCACA;
	border-style: solid;
}
.hidden {
	visibility: hidden;
}
 
-->
</style>
 
 
<script type="text/javascript">
 
 
function over(id, witch) {
	document.getElementById(id).src=witch;	
}
function out(id, witch) {
	document.getElementById(id).src=witch;	
}
function visible(id) {
	document.getElementById(id).style.visibility="visible";	
}
function novisible(id) {
	document.getElementById(id).style.visibility="hidden";	
}
</script>
</head>
 
<body>
<table>
	<tr>
        <td>
        <div class='case'>
            <div style="position:absolute;">
                <img src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' width='211' height='211' id='L1C1' alt='bague' style='text-align:center;'
                onmouseover="visible('mL1C1');" onmouseout="novisible('mL1C1');">
                <p>ref.01 - or<br>description...<br>99 €</p>
            </div>
            <div id="mL1C1" class='miniature' style="visibility:hidden;">
                <img src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' width='70' height='70' id='sL1C1' alt='bague' style='text-align:center;'
                onmouseover="over('L1C1', 'produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg');" onmouseout="out('L1C1', 'produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg');">
            </div>
        </div>
        </td>
    </tr>
</table>
 
</body>
</html>

08/06/2013, 14h05
Auteur

bonjour,

ton problème me rappelle celui qui a été évoqué dans cette discussion :
http://www.developpez.net/forums/d68...oppropagation/

Il faut que tu regardes du côté de cancelBubble et stopPropagation.

Bonjour,
je déplacerais la capture des événements onmouseover/out sur le conteneur et mettrais la DIV a apparaitre dans celui ci.

A j'allais oublier, pas besoin de javascript ;)

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans titre</title>
<style type="text/css">
#.conteneur{
  position:relative;
}
.conteneur img.hidden{
  display:none;
  position:absolute;
  top:20px;
  left:20px;
}
.conteneur:hover img.hidden{
  display:block;
}
</style>
</head>
<body>
<div class="conteneur">
  <img src="http://www.developpez.net/template/images/logo.png" alt="logo">
  <img class="hidden" src="http://css.developpez.com/faq/images/faq-css.gif" alt="faq">
</div>
</body>
</html>

09/06/2013, 23h01
jytest

Malheureusement, ce n'est pas là qu'est mon problème !

Voici ce que je souhaite :

Citation:

Le but recherché du javascript :
- Passer avec la souris sur l'image...
- Alors s'affiche une petite image en z-index supérieur !
- Ensuite, quand je passe avec la souris sur la petite image, la grande image (du fond) change...
- Je mets la souris hors de la petite image, l'image de fond redevient comme avant !
- Je quitte le survol de la grande image, le petit cadre avec la petite photo disparaît !

Citation:

Apparemment, le onmouseover et on mouseout se déclenchent quand je passe d'un enfant de l'élément sur lequel est appliqué l'évènement à un autre, ou tout simplement de l'enfant vers le parent.

J'ai effectivement pensé à "stopPropagation",
mais je n'y arrive pas !!!

Pouvez-vous m'aider, svp ?
Merci d'avance à tous !

Voici ma dernière trouvaille, mais je n'arrive pas à l'intégrer :

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>
<head>
    <script type="text/javascript">
        function ProcessEvent (event, eventName, elementName, stopPropagate) {
            WriteInfo ("The " + elementName + " element got an " + eventName + " event.");
            if (stopPropagate) {
                if ('bubbles' in event) {   // all browsers except IE before version 9
                    if (event.bubbles) {
                        event.stopPropagation ();
                        WriteInfo ("The propagation of the " + eventName + " event is stopped.");
                    }
                    else {
                        WriteInfo ("The " + eventName + " event cannot propagate up the DOM hierarchy.");
                    }
                }
                else {  // Internet Explorer before version 9
                        // always cancel bubbling
                    event.cancelBubble = true;
                    WriteInfo ("The propagation of the " + eventName + " event is stopped.");
                }
            }
        }
 
        function WriteInfo (message) {
            var info = document.getElementById ("info");
            info.innerHTML += message + "<br />";
            info.scrollTop = info.scrollHeight;
        }
    </script>
</head>
<body onclick="ProcessEvent (event, 'onclick', 'body', false);" 
      onfocus="ProcessEvent (event, 'onfocus', 'body', false);">
 
    The following button allows the propagation of the onclick and onfocus events:<br />
    <button onclick="ProcessEvent (event, 'onclick', 'first button', false);" 
            onfocus="ProcessEvent (event, 'onfocus', 'first button', false);">Allow propagation</button>
    <br /><br />
    The following button stops the propagation of the onclick and onfocus events:<br />
    <button onclick="ProcessEvent (event, 'onclick', 'second button', true);" 
            onfocus="ProcessEvent (event, 'onfocus', 'second button', true);">Stop propagation</button>
    <br /><br />
 
    Information about the events:<br />
    <div id="info" style="width:400px; height:200px; overflow:auto; background-color:#e0a0d0;"></div>
</body></html>

Pouvez-vous m'yaider ?
Merci d'avance.

tu sorts l'artillerie lourde pour quelque chose qui ce fait en CSS.

Certes il faut ajuster le code que je t'avais mis en premier lieu mais bon

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Multi :hover</title>
<style type="text/css">
.conteneur{
  position:relative;
  background:#EEF;
  height:250px;
  margin:2em;
  width:300px;
  cursor: pointer;
}
.conteneur img.image_0, .conteneur img.image_1 {
  position:absolute;
  z-index:1;
  top:1em;
  left:1em;
}
.hidden{
  display:none;
}
.conteneur img.image_2{
  position:absolute;
  z-index:10;
  bottom:1em;
  right:1em;
  border:1px solid #CCF;
}
.conteneur:hover img.image_2{
  display:block;
}
.conteneur img.image_2:hover ~ .image_0{
  display:none;
}
.conteneur img.image_2:hover ~ .image_1{
  display:block;
}
</style>
</head>
<body>
<div class="conteneur">
  <img class="image_2 hidden" src="http://club.developpez.com/webdesign/Rubriques/Web/CSS/mini_logo_faq_css.gif" alt="">
  <img class="image_1 hidden" src="http://club.developpez.com/webdesign/Rubriques/Web/logo_tous_les_cours_Web.gif" alt="">
  <img class="image_0" src="http://www.developpez.net/template/images/logo.png" alt="">
</div>
<div class="conteneur">
  <img class="image_2 hidden" src="http://club.developpez.com/webdesign/Rubriques/Web/CSS/mini_logo_faq_css.gif" alt="">
  <img class="image_1 hidden" src="http://club.developpez.com/webdesign/Rubriques/Web/logo_tous_les_cours_Web.gif" alt="">
  <img class="image_0" src="http://www.developpez.net/template/images/logo.png" alt="">
</div>
</body>
</html>

11/06/2013, 09h28
jytest

Merci NoSmoking !
Merci !