Funktionen zum Zoomen, Verschieben und Zentrieren

Tutorial: Zoomen und verschieben von Grafiken mit JavaScript

Ü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)

---

Zoomen und verschieben von Grafiken

Interaktive Multimedia-Präsentationen, bestehend aus Texten, Audio-Dateien, Gra­fiken und Videos, sind off- wie online allgegenwärtig. Vor allen im Online-Bereich spielt in diesem Zusammenhang die clientseitige Scriptsprache Java­Script eine bedeutende Rolle. In diesem Tutorial möchten wie einige Scripts näher be­schrei­ben, mit deren Funktionen Fotos und sonstige Grafiken vergrößert, verklei­nert, ver­schoben, zentriert und ausgerichtet werden können.
 

Quelle: Library of Congress - Pacific Coast - Alaska (PD / gemeinfrei)

Im Beispiel auf dieser Seite wird eine historische Landkarte in einer Größe von 525 x 395 Pixel (58,06 kB) zusammen mit der HTML-Webseite geladen. Bei der ersten Benutzung des Buttons "Zoom +" wird diese Grafik gegen eine Grafik mit einer Größe von 1.750px × 1.318px (363,01 kB) ausgetauscht, wodurch ein Zoom­bereich von 30% bis 100% in 10-Prozent-Schritten ermöglicht wird. Je nach der Geschwindigkeit der Internet-Verbindung kann dieses Nachladen der größeren Grafik einige wenige Sekunden (im Test etwa 2 Sekunden mit DSL 2.000) dau­ern, was dazu führt, dass die Grafik sich beim ersten Zoomen erst nach 1 bis 3 Se­kunden scharfstellt.
Es sei angemerkt, die Ladezeit von Webseiten und Grafiken ist nicht nur von der Verbindung abhängig, sondern auch von der Geschwindigkeit des Servers, mit welcher dieser auf Anfragen reagiert. Hat der Browser die größere Grafik erst einmal temporär im Cache zwischengespeichert, entfällt bei einem erneuten Seitenaufruf die Wartezeit (im Test Verkürzung der Ladezeit auf 295 Millisekun­den).
Da es sich im Beispiel auf dieser Seite lediglich um ein Demo handelt, wurde die Variante mit dem Nachladen der größeren Grafik gewählt. Bei einer "echten" Anwendung könnte die größere Grafik hingegen mit einem Event-Handler vorge­laden werden, so dass für die Benutzer der Webseite oder der Anwendung keine Verzögerungszeit bemerkbar wird.
Bei der Programmierung der Zoomfunktionen wurde darauf geachtet, dass sich ein grafisches Element nicht über seinem eigenen Rand hinaus verschieben lässt und dass bei einer einfachen Vergrößerung oder Verkleinerung der Fokus auf den Mittelpunkt der Grafik erhalten bleibt. Die Karte lässt sich somit nicht vor dem Zoomen verschieben und kehrt bei einer Verkleinerung wieder in ihre "Ausgangs­lage" zurück. Da jedoch die Übergänge innerhalb der einzelnen Zoomstufen fließend sind und nicht abrupt einsetzen, tritt kaum ein visuell nachteiliger Effekt auf.
Starten und Beenden lässt sich das Verschieben mit einem Klick auf die Grafik. Wenn ein User beim Ausrichten der Karte versehentlich den Zeiger der Maus über den Rand der Grafik hinaus bewegte, wird die Funktion ebenfalls unterbrochen und erst mit einem erneuten Klick auf die Grafik fortgesetzt.

Auf den folgenden Seiten werden die einzelnen Funktionen zum Zoomen, Ver­schie­ben, Ausrichten und Zentrieren von Grafiken näher beschrieben und im letzten Code-Listing vereint.

weiterlesen » Eine einfache Zoomfunktion