Grafiken lassen sich mit Hilfe von JavaScript nicht nur problemlos ausrichten,
sondern ebenso gleitend verschieben. Um eine Grafik nicht nur innerhalb eines Bereiches auszurichten, sondern
den visuellen Eindruck der fließenden Verschiebung eines Ausschnittes zu erhalten, genügt es oftmals bereits,
wenn die verwendeten Grafiken größer als der jeweilige Div-Bereich sind, in dem die Bilder eingebunden wurden.
Das im Folgenden auf dieser Seite beschriebene Script mag für eine Vielzahl von Anwendungsfällen bereits völlig
genügen, mit dem Maps von Kartendiensten, Routenplanen etc. ist es hingegen nicht vergleichbar. Diese Dienste
arbeiten mit Vektorgrafiken im SVG-Format oder mit anderen, speziell für Geodaten entwickelten Formaten.
Das Format Shapefile sei in diesem Fall erwähnt, da recht weit verbreitet. Gemeinsam haben diese Anwendungen,
dass die benötigten Karten erst auf Anfrage durch den Nutzer von der Anwendung oder bei Online-Diensten vom
Server, auf dem diese Anwendungen laufen, gerendert werden.
Quelle: CIA World Factbook - Karte von Europa (PD / gemeinfrei)
Im Beispiel auf dieser Seite lässt sich die Karte von Europa mit einem Klick
auf die Grafik vertikal wie horizontal verschieben, wobei der vertikale Spielraum etwas begrenzt ist und
lediglich 40 Pixel beträgt. Die neue Position lässt sich mit einem zweiten Klick fixieren. Sollte ein User
den Zeiger der Maus versehentlich über den Randbereich hinaus bewegen, wird die letzte Position ebenfalls
eingefroren und die Grafik kann erst nach einem erneuten Klick wieder bewegt werden.
Das Code-Listing mit ergänzenden Hinweisen und Angaben zu den Details finden Sie auf Seite 6 dieses Tutorials.
Ausrichten von Grafiken « / » Listing und Details zum Verschieben
Einstieg in JavaScript
Tutorials & Demos
Übersicht