Discussion :

[westernz]

Bonjour,

J'ai un code sympa pour un menu qui bouge en mouseover/out.
http://www.an16test.org/viewforum.ph...k=0&fap=0&ap=1

Mais il me reste un problème que je n'arrive pas annihiler.
Tant que je reste dans la div, là où il n'y a aucun contenu ca marche nikel.
Mais si je passe la souris sur un lien ou sur une des bordures de célulles de la table ca action onmouseover.

Comment faire pour que onmouseover ne s'active que si on quitte la div entière ?

Bonne journée

[arno15]

Salut,

Tu propages tes évènements à tous les éléments présents dans ton div ?

[westernz]

Je ne comprend pas trop la question.

Voici la partie du code correspondante :

Code html :

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

<div id="div_menu" class='bulle_deco menu_header' style="top:-10px; left:-440px; width:500px; height:120px; padding:10px; border:solid; border-width:1; " onmouseover="javascript:menu('over',1)" onmouseout="javascript:menu('out',1)">

Et de dans donc je colle tous mon contenu.
Un tableau avec des liens, des boutons... comme un menu

[arno15]

En fait je voulais savoir si les élements qui sont contenus dans ton div ont aussi quelque chose comme :

Code :

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

onmouseover="javascript:menu('over',1)" onmouseout="javascript:menu('out',1)"

Mais j'ai ma réponse.

A mon avis le plus simple est d'utilisé une librairie comme JQuery
qui te permettra faire en sorte que le survol d’éléments interne à ton div ne provoque pas les évènements onmouseout/onmouseover. Par exemple :

Code :

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

1
2
3
4
5
$('#test').hover(function() {
// le curseur passe sur l'élément
},function() {
// le curseur sort de l'élément
});

Sinon, il faut que tu modifie le code de la fonction "menu" pour détecter que la souris est entré ou sortie d'un élément interne à ton div et donc qu'aucune action est requise

[westernz]

C'est aussi ce que m'a dit un ami. Mais il n'était pas certain qu'il n'y ai pas d'autre solution.

Est-ce que Jquery va me demander de refaire tout mes codes ?
Je viens de passer des heures à réussir ce fichu menu qui bouge (j'en suis a minimiser le code).

Il va me falloir quelques basse, celles nécessaire à l'accomplissement de ce que j cherche à faire

Tu aurait un lien ?

EDIT :
Je suppose que je dois commencer par ecrire ca :
<script src="http://code.jquery.com/jquery-latest.js"></script>


J'ai essayé de modifier un script déjà existant et le problème est le même
http://www.an16test.org/test.php

Quand on passe la souris sur un element ca joute +1 au compte
Tu peux editer la page, il n'y a que le script dedans

Bonne journée

[Watilin]

Est-ce que Jquery va me demander de refaire tout mes codes ?

Oui. Arno a fait cette erreur que beaucoup de membres du forum font depuis quelques temps : proposer l'installation de la lib jQuery complète pour « simplifier » le codage d'une seule situation particulière. Ça revient à utiliser un bazooka pour tuer une mouche...

En JavaScript pur, je te conseille fortement d'utiliser les gestionnaires d'évènements. Tu dois pour cela laisser tomber les attributs HTML onmouseover et ses semblables. Un petit exemple :

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
<div id="carre"></div>
<style>
#carre { width:100px; height: 100px; background: green }
</style>
<script>
var $carre = document.getElementById('carre');
 
$carre.addEventListener('mouseover', function( e ) {
   this.style.background = 'red';
}, false);
 
$carre.addEventListener('mouseout', function( e ) {
   this.style.background = '';
}, false);
</script>

Comme tu le vois, avec cette méthode, le code HTML n'est pas « pollué » par du script.
Ce qu'on appelle les gestionnaires d'évènements, ce sont ces fonctions anonymes passées en argument à la méthode addEventListener. Elles ont en paramètre un objet Event que j'ai appellé e ici (mais je ne l'utilise pas dans cet exemple). Cet objet possède des propriétés importantes, notamment la propriété relatedTarget qui te permet de savoir sur quel élément le curseur était juste avant que l'évènement mouseover se produise.

Il te suffit de vérifier, par un bref parcours du DOM, si le relatedTarget est contenu par l'élément que tu surveilles, auquel cas ton gestionnaire ne fait rien. C'est ni plus ni moins ce que fait jQuery sous le capot.

Un point important : Microsoft rend les choses compliquées (comme d'hab quoi) en ayant sa propre syntaxe de gestionnaires d'évènements. Je te conseille de faire des recherches à propos de attachEvent, ainsi que les propriétés fromElement et toElement de l'objet Event sous MSIE. Si tu es à l'aise en anglais, le site Quirksmode est une très bonne source. Par exemple : http://www.quirksmode.org/js/events_...#relatedtarget

Bonne lecture