Démarage et arrêt d'une fonction au survol

Version imprimable

21/01/2013, 11h23
Zuthos

Démarage et arrêt d'une fonction au survol

Bonjour,

Je souhaite démarrer une fonction au survol d'un élément. Ce la ne pose pas de soucis avec un simple:
onsouseover.

Le problème que je n'arrive pas à résoudre et comment arrêter la fonction ceci sachant qu'elle utilise évènement onmousemove.

D'avance merci
21/01/2013, 11h57
Vercetti

Il doit exister différentes façon de faire.
Mais intuitivement en créant une variable globale booléenne , tu devrait pouvoir faire tourner dans ta fonction la routine que tu souhaites avec une condition (if(pause==false)), et la stopper en passant à false la variable globale lors du "onmouseout".
21/01/2013, 12h01
Invité

Bonjour,

Je pense qu'il nous manque des éléments pour te répondre de manière pertinente. Que fait la fonction lancée lors du survol ? Elle lance une boucle que tu veux arrêter quand le pointeur quitte l'élément tracké ?

"Arrêter une fonction", c'est vague. Si c'est une boucle, tu peux imaginer un flag boolean qui se met à false au moment ou le curseur sort de l'élément que tu track. Tu rajoute ensuite dans ta boucle une condition sur le boolean.
21/01/2013, 12h16
Zuthos

En fait, il s'agit du suivit du pointeur par une image.
21/01/2013, 17h54
Bovino

Il existe plusieurs façons d'attacher un événement.
Si tu ne nous montres pas comment tu fais, on ne peut pas te répondre efficacement !

Citation:

Envoyé par Bovino

Il existe plusieurs façons d'attacher un événement.
Si tu ne nous montres pas comment tu fais, on ne peut pas te répondre efficacement !

:oops:

Voici la fonction de suivi:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function suitsouris(evenement){                                           
        if(navigator.appName=="Microsoft Internet Explorer"){             
                var x = event.x+document.body.scrollLeft;                 
                var y = event.y+document.body.scrollTop;                  
        } else {                                                          
                var x =  evenement.pageX;                                 
                var y =  evenement.pageY;                                 
        }                                                                 
        /*document.getElementById("image_suit_souris").style.left = (x+1)+'px';
        document.getElementById("image_suit_souris").style.top  = (y+1)+'px';*/
        var pointeur=document.getElementById("image_suit_souris");
        pointeur.style.left = (x-(pointeur.width)/2)+'px';                
        pointeur.style.top  = (y-(pointeur.height)/2)+'px';
        //alert(pointeur.src.width);
}

Et puis l'image:

Code:

<img src="admin/cible.png" alt="Image qui suit la souris" id="image_suit_souris" style="position:absolute;display:block;z-index:5;" ;/>

Je veux que lors du survol d'un menu une image suive le pointeur pour mettre en relief la sélection

Je propose l'évènement qui se nomme mouseenter, et son confrère mouseleave. Ils fonctionnent comme mousein et mouseout, à la seule différence qu'ils vérifient avant d'agir que la cible est bien l'élément sur lequel le gestionnaire a été attaché. En clair, ils se comportent comme la pseudoclasse CSS :hover. C'est une bonne idée introduite - pour une fois - par Microsoft dans Internet Explorer depuis la version… 5.5 !

Au passage, j'adore la façon dont Peter-Paul Koch invite les éditeurs de navigateurs à implémenter ces évènements dans les plus brefs délais. (http://www.quirksmode.org/dom/events/)

Mais bref. Voici comment simuler ces évènements sur un navigateur qui n'est pas Internet Explorer :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 $element.addEventListener("mousein", function( event ){ if (this != event.target) return; // ici le code de la fonction mouseenter }, false); $element.addEventListener("mouseout", function( event ){ if (this != event.target) return; // ici le code de la fonction mouseleave }, false);