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

Résolu

juanou -
juanou - 23 juin 2008 à 11:01

Salut.

J'ai dans une page html un <div> 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 <div>. Et je voudrais qu'il puisse faire ça simplement en gardant la souris positionnée au dessus d'un objet (disons un lien <a>).

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 <div>, 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 :

<div id="viewer"></div>
<a href="#" onMouseOver="defiler();">survoler ce lien pour faire défiler l'image</a>

* 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 ?

Afficher la suite

A voir également:

Javascript : répéter tant que souris enfoncée
Telecharger javascript - Télécharger - Langages
A javascript error occurred in the main process - Forum Handicap / Accessibilté
Erreur #125 javascript - Forum Mozilla Firefox
Afficher un tableau javascript en html ✓ - Forum Javascript
Javascript arrondi - Forum Javascript

2 réponses

Réponse 1 / 2

macgawel Messages postés 664 Date d'inscription Statut Membre Dernière intervention 89

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.

Réponse 2 / 2

juanou

Impec.
C'est ce que je cherchais.

Merci macgawel

Discussions similaires

java script error in the main process

Javascript Arrondi à 2 chiffres après la virgule

javascript:void(0);

Faire un echo dans un script JS

a javascript error occurred in the main process

Votre réponse

Discussions similaires