[POO] onmouseover et DIV

Bonjour,
Je suis dans la situation suivant :

Code:

---

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

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:

---

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>

---

FAUX :-(

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

Code:

---

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

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>

>Tous simplement GENIAL !


Merci fabiano13 pour ce code JavaScript il marche a merveille !


:yaisse2:

Martin MAGAKIAN

Citation:

---

Envoyé par diva_69

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.