Bildausschnitt zoomen und bewegen per JavaScript

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:

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.