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 :
Dans FF, la var stopIt semble ne pas être modifiée tant que l'event onmousemove est généré, or via une alert dans dropIt(), stopIt est bien mis à "true" lors du onmouseup !!?
Merci d'avance pour votre aide.
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 var stopIt semble ne pas être modifiée tant que l'event onmousemove est généré, or via une alert dans dropIt(), stopIt est bien mis à "true" lors du onmouseup !!?
Merci d'avance pour votre aide.
)