javascript : répéter tant que souris enfoncée Résolu/Fermé

Question

Salut. J'ai dans une page html un

auquel j'ai appliqué une image de fond (par css). Je voudrais que l'utilisateur puisse faire défiler cette image, qui est plus grande que le

. Et je voudrais qu'il puisse faire ça simplement en gardant la souris positionnée au dessus d'un objet (disons un lien ). J'ai pu créer un script qui me permet d'augmenter (ou de diminuer) de 10 pixel à chaque fois le "background-position" de mon

, afin de faire défiler l'image. Mais mon souci est qu'en utilisant des événements du type onMouseOver ou onMouseDown, le décalage de l'image n'a lieu qu'une fois, alors que je voudrais qu'il se répète tant que l'utilisateur n'a pas retiré sa souris de l'objet qu'il active le script. * voici le contenu du corps de ma page html :

survoler ce lien pour faire défiler l'image * voici le style css appliqué à mon div #viewer { height:100px; width:100px; background-image: url(image/grandeimage.jpg); background-repeat: repeat-x; background-position : 0px 0px; } * et voici enfin le javascript qui me permet de faire défiler l'image. var pos = 0 ; function defiler() { pos = pos - 10 ; document.getElementById('viewer').style.backgroundPosition = pos+'px 0px'; } Quelqu'un saura-t-il résoudre mon problème ?

macgawel · Answer

Bonjour.

Ce n'est certainement pas le plus propre, mais ça marche - en tout cas chez moi...
Javascript :

var pos = 0 ; var defilement=true;
function defiler() {
	if (defilement) {
		pos = pos - 10 ;
		document.getElementById('viewer').style.backgroundPosition = pos+'px 0px';
		if (pos < -300) {
			defilement = false;
		}
		setTimeout("defiler()", 100);
	}
}
function start() {
	defilement = true;
	defiler();
}
function stop() {
	defilement=false;
	pos=0;
	document.getElementById('viewer').style.backgroundPosition = '0px 0px';
}

HTML :

<a href="#" onMouseOver="start();" onMouseOut="stop()">survoler ce lien pour faire défiler l'image</a>

Le principe :
Quand on passe la souris sur le lien, on déclenche la fonction start().
Cette fonction passe la variable defilement à True (pour dire de commencer le défilement), puis appelle la fonction defiler().
La fonction defiler :
On teste si on a defilement à True,
Le test if (pos < -300) est juste là pour éviter d'aller trop loin.
Si defilement est à True, la fonction défiler() s'appelle elle-même avec le setTimeout.

Quand on quitte le lien (onMouseOut), on passe defilement à False (et je remets la photo à sa place d'origine).
=> A la prochaine exécution de defiler(), comme defilement est False, on ne fait rien.

juanou · Answer

Impec.
C'est ce que je cherchais.

Merci macgawel

Javascript : répéter tant que souris enfoncée

2 réponses

Discussions similaires