11544 sujets

JavaScript, DOM et API Web HTML5

Utiliser "stopPropagation" et à "cancelbubble" ?

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 ?
A l'aide !

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

<!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>
        <td>
        <div class='case'>
        <div style="position:absolute;">
        <img src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' width='211' height='211' id='L1C2' alt='bague' style='text-align:center;'
        onmouseover="visible('mL1C2');" onmouseout="novisible('mL1C2');">
        <p>ref.01 - or<br>description...<br>99 €</p>
        </div>
        <div id="mL1C2" 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('L1C2', 'produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg');" onmouseout="out('L1C2', 'produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg');">
        </div>
        </div>
        </td>
        <td>
        <div class='case'>
        <div style="position:absolute;">
        <img src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' width='211' height='211' id='L1C3' alt='bague' style='text-align:center;'
        onmouseover="visible('mL1C3');" onmouseout="novisible('mL1C3');">
        <p>ref.01 - or<br>description...<br>99 €</p>
        </div>
        <div id="mL1C3" 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('L1C3', 'produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg');" onmouseout="out('L1C3', 'produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg');">
        </div>
        </div>
        </td>
    </tr>
 	<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='L2C1' alt='bague' style='text-align:center;'
        onmouseover="visible('mL2C1');" onmouseout="novisible('mL2C1');">
        <p>ref.01 - or<br>description...<br>99 €</p>
        </div>
        <div id="mL2C1" class='miniature' style="visibility:hidden;">
        <img src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' width='70' height='70' id='sL2C1' alt='bague' style='text-align:center;'
        onmouseover="over('L2C1', 'produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg');" onmouseout="out('L2C1', 'produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg');">
        </div>
        </div>
        </td>
        <td>
        <div class='case'>
        <div style="position:absolute;">
        <img src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' width='211' height='211' id='L2C2' alt='bague' style='text-align:center;'
        onmouseover="visible('mL2C2');" onmouseout="novisible('mL2C2');">
        <p>ref.01 - or<br>description...<br>99 €</p>
        </div>
        <div id="mL2C2" class='miniature' style="visibility:hidden;">
        <img src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' width='70' height='70' id='sL2C2' alt='bague' style='text-align:center;'
        onmouseover="over('L2C2', 'produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg');" onmouseout="out('L2C2', 'produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg');">
        </div>
        </div>
        </td>
    	<td>
        <div class='case'>
        <div style="position:absolute;">
        <img src='produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg' width='211' height='211' id='L2C3' alt='bague' style='text-align:center;'
        onmouseover="visible('mL2C3');" onmouseout="novisible('mL2C3');">
        <p>ref.01 - or<br>description...<br>99 €</p>
        </div>
        <div id="mL2C3" class='miniature' style="visibility:hidden;">
        <img src='produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg' width='70' height='70' id='sL2C3' alt='bague' style='text-align:center;'
        onmouseover="over('L2C3', 'produits/bagues/Celinni_Side_400/CELINNI1968_030B_s.jpg');" onmouseout="out('L2C3', 'produits/bagues/Celinni_Perspective_400/CELINNI1968_030B_p.jpg');">
        </div>
        </div>
      	</td>
    </tr>
</table>

</body>
</html>

Modifié par jytest (10 Jun 2013 - 04:51)
salut,
ton code est assez confus et difficilement lisible. Pourquoi ne pas passer par du CSS pour faire ça ? Dans ce genre d'évènements, le onmouseover et on mouseout se déclenche quand tu passes 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.
Peux-tu m'aider un peu plus ?

Attention, je ne souhaite absolument de rechargement de page...
Car, par la suite, ce code sera utilisé avec de l'ajax !

Pour les besoins de la chose, je viens de "simplifier" le code :
<!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>

Modifié par jytest (07 Jun 2013 - 15:32)
De plus, il me semble que le ":hover" ne fonctionne pas
pour modifier une image "étrangère" d'un autre "id" !

Mais alors, comment faire ?
Une idée ?
Modifié par jytest (11 Jun 2013 - 10:21)
Apparemment, les "onmouseover" et "onmouseout" 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 pensé à "stopPropagation" et à "cancelbubble",
mais je n'y arrive pas à les intégrer dans le code !!!

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

Voici ce que je souhaite :
a écrit :

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 !

Modifié par jytest (11 Jun 2013 - 10:22)
Voici ma dernière trouvaille, mais je n'arrive pas à l'intégrer :
<!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.
Sujet clos
Aller à