Im vorausgehenden Beispiel wurde beim Ausrichten und Verschieben von kleineren Grafiken innerhalb eines Bereiches die Position des Mauszeigers mit offsetX und offsetY bzw. mit layerX und layerY abgefragt. Soll eine größere Grafik hingegen über den Rand des Bereiches hinaus positioniert werden, ist eine Abfrage der Eigenschaften von clientX und clientY bzw. pageX und pageY besser geeignet. Abgefragt werden die Koordinaten des Mauszeigers ausgehend von der linken oberen Ecke des Fensters bzw. des Dokumentes. Auch hier ist wieder eine Fallunterscheidung zwischen den Browsern, die entweder auf der Microsoft- oder auf der Netscape-Syntax beruhen, erforderlich.
Erfolgt ein Klick auf die Grafik, wird zuerst mit Hilfe des Event-Handlers
onclick die Funktion posVerschiebe() aufgerufen, die wiederum bei Aufruf die Funktion posSpeichere() aufruft
und danach die Funktion posSchiebe(). Die Funktion posSpeichere hat beim Aufruf die Mausposition zum Zeitpunkt
des Ereignisses in den Variablen xmaus und ymaus gespeichert sowie die äußeren Abstände der Grafik in den Variablen
magtp und maglf.
Da die Abfrage mit getElementById("bild").style.marginTop bzw. marginLeft erfolgt, liefert die
Methode als Eigenschaft einen String, aus dem mit Hilfe von replace erst einmal die Angabe px herausgefiltert
werden muss. Im nächsten Schritt kann dann der Typ String durch eine einfache Multiplikation mit *1 in den
Typ Number gewandelt werden. Alternativ könnte für diese Aufgabe die JavaScript Funktion parseInt() zum
Einsatz kommen, die den Code um zwei Zeilen verkürzen würde.
/* Beispiel mit parseInt
*/
magtp = parseInt(magtp, 10);
maglf = parseInt(maglf, 10);
Die Funktion parseInt() wandelt einen String, der mit Ziffern beginnt, in
einen Integer-Wert vom Typ Number um, wobei die 10 für Dezimalzahlen (Zehnersystem) steht. Die
Ziffern müssen sich jedoch am Anfang des Strings befinden, was im Beispiel der Fall ist. Doch bekanntlich
führen immer mehrere Wege nach Rom und so wurde der oben beschriebene Weg gewählt.
Wie bereits im vorausgehenden Code-Listing beschrieben, so dienen auch in diesem Beispiel einige if-Statements
nur dem Zweck, dass sich die Grafik nicht über ihren eigenen Randbereich hinausgehend in den Div-Bereich
hineinschieben lässt. Von größerer Bedeutung ist hingegen die alte und neue Mausposition, einschließlich
der äußeren Abstände.
Beispiel für Berechnung:
obenl = (yediv - ymaus) + magtp;
margin-top alt: -58px
-86px = (319px - 347px) + -58px
margin-top neu: -86px
Erwähnenswert ist weiterhin, dass (bis auf wenige Ausnahmen) beinahe alle Variablen als globale Variablen deklariert wurden. Da die Werte der meisten Variablen in mehr als einer Funktion zur Verfügung stehen müssen, wurden nur wenige lokale Variablen deklariert.
<!DOCTYPE html> <html> <head> <title>Verschieben von Grafiken</title> <style type="text/css"> h1 {text-align:center} div#fbild {position:relative; text-align:center; background-color:#e7debd; border:1px solid #7f4925; width:500px; height:400px; margin:auto; overflow:hidden} img#bild {cursor:move} </style> </head> <body> <h1>Verschieben von Grafiken</h1> <div id="fbild"> <img id="bild" src="europa.jpg" alt="Karte" width="540" height="695" onclick="posVerschiebe()"> </div> <script type="text/javascript"> var begre = document.getElementById("bild").style; var fuerb = document.getElementById("fbild"); var beikl = "start"; var xmaus = 0; var ymaus = 0; var magtp = 0; var maglf = 0; var vorgt = -295; // Vorgabe marginTop max -295 var vorgl = -40; // Vorgabe marginLeft max -40 function posSpeichere() { fuerb.onclick = function(maus) { if (typeof(window.event) != "undefined") { xmaus = window.event.clientX; ymaus = window.event.clientY; } else { xmaus = maus.pageX; ymaus = maus.pageY; } if (typeof(begre.marginTop) != "undefined" || typeof(begre.marginLeft) != "undefined") { magtp = begre.marginTop; maglf = begre.marginLeft; magtp = magtp.replace(/px/i, ""); maglf = maglf.replace(/px/i, ""); magtp = magtp *1; maglf = maglf *1; if (magtp > vorgt) magtp = magtp; else if (magtp <= vorgt) magtp = vorgt; else magtp = 0; if (maglf > vorgl) maglf = maglf; else if (maglf <= vorgl) maglf = vorgl; else maglf = 0; } } } function posSchiebe() { beikl = "stopp"; var ediv, xediv, yediv, seitl, obenl; fuerb.onmousemove = function(ediv) { if (typeof(window.event) != "undefined") { xediv = window.event.clientX; yediv = window.event.clientY; } else { xediv = ediv.pageX; yediv = ediv.pageY; } seitl = (xediv - xmaus) + maglf; obenl = (yediv - ymaus) + magtp; if (seitl >= vorgl && seitl < 0) { begre.marginLeft = seitl + "px"; } else if (seitl >= 0) begre.marginLeft = "0px"; else begre.marginLeft = vorgl + "px"; if (obenl >= vorgt && obenl < 0) { begre.marginTop = obenl + "px"; } else if (obenl >= 0) begre.marginTop = "0px"; else begre.marginTop = vorgt + "px"; } } function posVerschiebe() { posSpeichere(); if (beikl == "start") posSchiebe(); else { beikl = "start"; fuerb.onmousemove = null; } fuerb.onmouseout = function() { if (beikl == "stopp") { beikl = "start"; fuerb.onmousemove = null; } } } </script> </body> </html>
Auf der nächsten Seite des Tutorials wird mit Hilfe eines Programmablaufplanes ein Prinzip beschrieben, wie die bisherigen Funktionen zum Zoomen und Verschieben sich kombinieren lassen.
Einstieg in JavaScript
Tutorials & Demos
Übersicht