scrollleiste.de

Bildausschnitt zoomen und bewegen per JavaScript

von Christoph Dietrich

Shiftzoom ist eine JavaScript-Tool, mit dem sich Bilder in einem Rahmen vergrößern (und verkleinern) lassen und bewegen lassen. Diese Navigation kennt man beispielsweise von Google Maps. Das eignet sich deshalb insbesondere für die Darstellung von Kartenmaterial oder für extrem hochaufgelöste Bilder:

JavaScript Shiftzoom


Auch die von Google Maps bekannte kleine Übersichtsdarstellung rechts unten im Eck ist möglich. Neben den beiden Buttons „+“ und „-“ für das Ein- und Auszoomen, ist das Ansteuern des Bildes per Keyboard-Tasten möglich.

Der JavaScript-Codes lässt sich „unobtrusive“ (unaufdringlich) verwenden, hält also das Markup durch reine Verwendung in einem JavaScript-Bereich sauber. Leichter und schneller geht’s jedoch wenn man direkt dem Bild-Element ein onload="shiftzoom.add(this);" gibt.

Keine Kommentare

Share on Twitter Share on Facebook Show Google +1 Button

Anzeigen