Trucsweb.com

Forum de discussion

 Forum « Programmation Javascript » (archives)

Déplacement d'image via backgroundPosition +/- KO en Firefox

Envoyé: 28 novembre 2005, 6h00 par g41687


But : déplacer une grande carte avec la souris dans un div qui n'affiche qu'une petite partie de cette carte.

OK sous IE
+/- KO sous Firefox :

onmousedown autorise le déplacement
onmousemove ... déplace la carte
onmouseup et onmouseout arrêtent le déplacement (appel de la même fonction)

Sous FF OK via onmouseout et KO via onmouseup alors que c'est la même fonction qui est appelée

Voici le code :

<script type="text/javascript">
<!--
var clickX = 0; // init X mouse position on mouse click.
var clickY = 0;
var X = 0; // init X mouse position (used during drag).
var Y = 0;
var constX = 0; // init image position in the div before click.
var constY = 0;
var stopIt = true;

function clickIt(e) {
// get the mouse position in the div when the user clicks.
if (e.pageX) { // Netscape.
realLeft = e.pageX;
realTop = e.pageY;
} else if (e.clientX) { // IE & Firefox.
realLeft = e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
realTop = e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}
clickX = realLeft - X - constX;
clickY = realTop - Y - constY;
stopIt = false; // to say to moveIt() that the image can be moved.
return;
}

function dropIt() {
// drop the background when user release the mouse button or quit the div.
clickX = 0;
clickY = 0;
constX = -X; // store old background position.
constY = -Y;
stopIt = true; // to say to moveIt() that the image can't be moved anymore.
return;
}

function moveIt(e) {
// change background position in the div when the user moves the mouse.
if (stopIt == false) {
p = document.getElementById('mapNord').style;
if (e.pageX) {
realLeft = e.pageX;
realTop = e.pageY;
} else if (e.clientX) {
realLeft = e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
realTop = e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}
X = realLeft - constX - clickX;
Y = realTop - constY - clickY;
// limit the move to image width and height
if (X > 0) X = 0;
if (Y > 0) Y = 0;
var w = 2509-640; // image width="2509" - div width=640 .
var h = 1329-300; // image height="1329" - div height=300.
if (X < -w) X = -w;
if (Y < -h) Y = -h;
// new background position
var newpos = X + "px " + Y + "px";
p.backgroundPosition = newpos;
}
return;
}
// -->
</script>

Dans FF, la variable stopIt semble ne pas être modifiée tant que l'event onmousemove est généré, or via une alert dans la fonction dropIt(), stopIt est bien mis à "true" lors du onmouseup !!?

Merci d'avance pour votre aide.


Réponses

 sp spRe: Déplacement d'image via backgroundPosition +/- KO en Firefox  datapuce7/12/2005
 sp spRe: Déplacement d'image via backgroundPosition +/- KO en Firefox  g4168729/11/2005
Aucun médias sociaux
X

Trucsweb.com Connexion

X

Trucsweb.com Mot de passe perdu

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte