Discussion :

[diva_69]

Bonjour,
Je suis dans la situation suivant :

Code :

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

1
2
3
4
<div onmouseover="alert('toto');" onmouseout="alert('tata');" >
Salut
        <div>Kikou</div>
</div>

quand je met ma sourie sur le texte 'Salut' j'ai le message 'toto' mais quand je met ma sourie sur 'Kikou' j'ai le message 'tata' qui s'affiche.

J'aimerais afficher le message 'tata' uniquement quand ma sourire quitte ma div principal (là où j'ai écrit 'Salut' )

Merci de votre aide.
Martin MAGAKIAN

[fabiano13]

Le problème qui se pose pour ton exemple c'est que pour confirmer la première alert il te faut sortir de ton div pour apuyer sur OK. Ensuite il t'affiche la dexième alert TATA. Ainsi de suite....

voici ce que je te propose :

Code :

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

1
2
3
4
5
6
7
<script>
<div onmouseover="document.getElementById('message').innerHTML='Toto';return false;" onmouseout="document.getElementById('message').innerHTML='Tata';return false;" style="width: 49px; height: 38px">
Salut
        <div>Kikou</div>
</div>
<div id="message"></div>
</script>

[diva_69]

FAUX :-(

Ta technique semble marcher mais en réalité elle est fause...

Code :

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

1
2
3
4
5
<div onmouseover="document.getElementById('message').innerHTML +=' | dedans';" onmouseout="document.getElementById('message').innerHTML +=' | dehors ';">
Salut
        <div>Kikou</div>
</div>
<div id="message"></div>

Quand on passe de 'Salut' a 'Kikou' etc... Voila le rendu visuel :
dedans | dehors | dedans | dehors | dedans | dehors | dedans | dehors | etc...

Comme si il y avait un espace invisible entre mes deux div...

[fabiano13]

Dis moi si c'est Ok.

<script>
function sSurvolObj(e, handler) {
if (e.type != 'mouseout' && e.type != 'mouseover') return false;
var reltg = e.relatedTarget ? e.relatedTarget :
e.type == 'mouseout' ? e.toElement : e.fromElement;
while (reltg && reltg != handler) reltg = reltg.parentNode;
return (reltg != handler);
}
</script>

<div onmouseout="if (sSurvolObj(event,this)) document.getElementById('message').innerHTML = 'dehors';" onmouseover="if (sSurvolObj(event,this)) document.getElementById('message').innerHTML = 'dedans';" style="width: 350px; border: 1px solid black; background: #eef">
Ton texte de début
<div style="width: 160px; border: 5px solid black; margin: 20px; background: #efe">
ton div interne</div>
fin de ton texte
</div>

<div id="message"></div>

[diva_69]

>Tous simplement GENIAL !


Merci fabiano13 pour ce code JavaScript il marche a merveille !




Martin MAGAKIAN

[Auteur]

Comme si il y avait un espace invisible entre mes deux div...

non il n'y a pas d'espace invisible entre les div. Tu as cette alternance des événements car tu passes d'un objet à l'autre.