Ausrichten von Grafiken mit JavaScript

Erfassung und Verarbeitung von Events zur Positionierung

Übersicht / Seite:

1. Funktionen zum Zoomen (und zum Verschieben von Grafiken)
2. Eine einfache Zoomfunktion (für Bilder mit JavaScript, allgemeine Infos)
3. Code-Listing und Details (Beschreibung einer einfachen Zoomfunktion)
4. Ausrichten von Grafiken (und zentrieren innerhalb eines Bereiches)
5. Verschieben von Grafiken (ausschnittsweise innerhalb eines Bereiches)
6. Listing und Details (zum Verschieben von Bildern oder sonstigen Grafiken)
7. Funktionsweise und Prinzip (Programmablaufplan / Flussdiagramm)
8. Komplettes Code-Listing (zum Zoomen und Ausrichten von Grafiken)

---

Verarbeitung von Ereignissen

Grafiken lassen sich relativ einfach ausrichten, in dem die x und y Koordinaten des Mauszeigers abgefragt und bestimmt werden. Ein gelernter Programmierer sollte es wissen, ein Hobby-Programmierer sollte es zumindest einmal gehört oder gelesen haben und bedenken, dass Bewegungen der Maus und andere von der Maus aus­gehende Events nicht direkt von einer Anwendung erfasst werden, sondern vom Betriebssystem. Erst die Kommunikation des Betriebssystems mit einer beliebigen Anwendung ermöglicht eine Weiterverarbeitung von Ereignissen bzw. von Events.

Beim vorliegenden Script wird das Ereignis eines Klicks zusammen mit den x und y Koordinaten der momentanen Mausposition zuerst vom Betriebssystem erfasst, dann erfolgt durch die Anwendung eine Auswertung, wie mit diesem Event umzu­gehen ist. Mit Anwendung ist in diesem Fall nicht unser kleines Script gemeint, sondern der Browser, der letztendlich bestimmt, in welchem per CSS relativ oder absolut positionierten Bereich eine Grafik wie angezeigt werden soll.

Zentrieren innerhalb eines Bereiches

Im Beispiel auf dieser Seite wird das Abbild einer kleinen Karten Mitteleuropas mit CSS-Angaben relativ in einem Div-Bereich positioniert, wobei mit margin-top und margin-left der jeweilige äußere obere und äußere seitliche Abstand zu dem Be­reich angegeben wurde, zu dem die Grafik relativ ausgerichtet wurde. Erfolgt ein Mausklick auf einem beliebigen Punkt in dieser Karte, wird der angeklickte Punkt sich zum Mittelpunkt des Koordinatensystems verschieben.

Kleine Karte von Mitteleuropa

Um diese Zentrierung per Mausklick zu ermöglichen, wird mit dem Event-Handler onclick die Funktion setzePunkt() aufgerufen. Die erste Aufgabe dieser Funktion besteht darin, die x und y Koordinaten innerhalb der Grafik zu ermitteln, an der das Ereignis des Mausklicks stattfand. Die IF-Abfrage maus.offsetX dient als Fall­unterscheidung, da auf der Microsoft-Syntax basierende Browser Ereignisse etwas anders behandeln und verarbeiten als Browser, die auf der für neuere Browser weiterentwickelten Syntax von Netscape beruhen. Der nächste Absatz ist nur noch Geschichte, alle Scripts laufen auch noch unter Firefox 53 und IE 11!

Es sei angemerkt, einige im Web zu findende Angaben konnten mit neuzeitlichen Browsern nicht nachvollzogen werden oder wurden missverständlich aufgefasst. Zu diesen nicht nachvollziehbaren Angaben gehörte, dass sich im Firefox die mit layerX und layerY ermittelten Daten auf ein höher gelegenes, absolut oder relativ positioniertes Element oder, falls ein solches Element nicht vorhanden ist, auf die linke obere Ecke des jeweiligen Dokuments beziehen würde. Durchgeführte Abfra­gen (z.B. mit dem Firefox 15) der Variablen xmaus und ymaus ergaben jedoch immer Angaben, die sich nur auf die eigentliche Grafik bezogen. Möglich, dass ältere Versionen des Firefox abweichende Ergebnisse liefern.

Die restlichen IF-Statements dienen nur noch zur Begrenzung der möglichen Ver­schiebungen im Div-Bereich, um eine Verschiebung der Grafik über den ge­wünsch­ten Anzeigebereich hinaus zu vermeiden. Damit das Bild sich nicht über den Rand des Div-Bereiches hinaus verschiebt, wurde margin-top und margin-left begrenzt.

Beispiel mit 194:

var margoben 194 = padtop 96 + (halbeh 104 - ymaus 6);

var maxtop = 400 - 208 = Vorgabe maxtop 192


if (194 größer oder gleich 0 oder 194 kleiner oder gleich 192) {Bedingung nicht erfüllt!}

Die erste Bedingung wäre aber erfüllt, wenn der ermittelte Wert zwischen 0 und 192 liegen würde.

else if (194 größer als 192) {Bedingung erfüllt und docsty.marginTop wird der maximale Wert von 192px zugewiesen.}

else if (192 kleiner als 0) {Bedingung wird nicht mehr abgefragt, da Bedingung bereits erfüllt wurde!}

Mit document.getElementById("dbild").style.marginTop und marginLeft werden die errechneten und falls erforderlich korrigierten Werte der Grafik zugewiesen.


Das Code-Listing für das obere Beispiel:

<!DOCTYPE html>
<html>

<head>
<title>Ausrichten von Grafiken</title>
<style type="text/css">
h1 {text-align:center}
div.fdbild {background-image:url('koordinaten.jpg'); 
border:1px solid #7f4925; width:500px; height:400px; margin:auto}
img.grafik {position:relative; margin-left:120px; margin-top:96px}
</style>
</head>

<body>
<h1>Ausrichten von Grafiken</h1>
<div class="fdbild">
<img id="dbild" src="mitteleuropa.jpg" alt="Kleines Mitteleuropa"
onclick="setzePunkt(event,this)" width="260" height="208" class="grafik">
</div>
<script type="text/javascript">

function setzePunkt(maus) {

    var halbeh = 208 / 2;      // halbe Höhe des Bildes
    var halbew = 260 / 2;      // halbe Weite des Bildes
    var padtop = 96;           // Vorgabe marginTop
    var padlef = 120;          // Vorgabe marginLeft
    var maxtop = 400 - 208;    // Vorgabe max marginTop
    var maxlef = 500 - 260;    // Vorgabe max marginLeft

    var docsty = document.getElementById("dbild").style;
    var xmaus, ymaus, margoben, seitlich;

    if (maus.offsetX ) {
        xmaus = maus.offsetX;
        ymaus = maus.offsetY;
    }
    else {
        xmaus = maus.layerX;
        ymaus = maus.layerY;
    }
    margoben = padtop + (halbeh - ymaus);
    seitlich = padlef + (halbew - xmaus);

    if (margoben >= 0 && margoben <= maxtop) {
        docsty.marginTop = margoben + "px";
    }
    else if (margoben > maxtop) docsty.marginTop = maxtop + "px";
    else if (margoben < 0)      docsty.marginTop = "0px";

    if (seitlich >= 0 && seitlich <= maxlef) {
        docsty.marginLeft = seitlich + "px";
    }
    else if (seitlich > maxlef) docsty.marginLeft = maxlef + "px";
    else if (seitlich < 0)      docsty.marginLeft = "0px";
}

</script>
</body>
</html>

Etwas umfangreicher wird der Code, wenn größere Grafiken nicht nur per Klick ver­schoben werden sollen, doch dazu ab der 5. Seite dieses Tutorials mehr.

Code-Listing und Details « / » Verschieben von Grafiken