Discussion :

[Zuthos]

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

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

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

[Zuthos]

En fait, il s'agit du suivit du pointeur par une image.

[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 !

[Zuthos]

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 !

Voici la fonction de suivi:

Code :

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

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 html :

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

<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

[Watilin]

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 :

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

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);