Forum de discussion
Forum « Programmation Javascript » (archives)
Déplacement d'image via backgroundPosition +/- KO en Firefox
Envoyé: 28 novembre 2005, 6h00 par g41687
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
|