(Frühere Versionen zeigen ein normales Browserfenster an.)
Verantwortlich für diese kleine Spielerei sind zwei (2)
Scripts, die ich in diesem Fall ausgelagert habe. Die Dateien
zeigen.js und bewegen.js
Wie üblich werden diese Dateien im Head-Sektor Ihrer HTML-Seite eingebunden.
<script language="JavaScript1.2" src="bewegen.js"></script>
<script language="JavaScript1.2" src="zeigen.js"></script>
Aufgerufen bzw. ausgeführt wird das Ganze mit einem "onClick Event", der im Anker-Tag.
eingebunden wird.
<a href="Ihr_Bild.jpg" onClick="return enlarge
('Ihr_Bild.jpg' ,event)">
<img src="Ihr_Bild.jpg" width="200" height="133"
style="border: 4px inset lavender;"></a>
Mit den "width" und "height" Attributen legt man die Ausgangsgröße des Bildes fest.
Außerdem kann man natürlich auch Style-Anweisungen für das Bild festlegen.
Wie in diesem Beispiel für den Rahmen.
Klickt man nun auf das Bild, öffnet sich ein Layer mit den
Originalmaßen des Bildes. Außerdem Ist am oberen Rand noch
eine Funktionsleiste zum Veschieben und Schließen untergebracht.
Diese Leiste kann man in der Script-Datei zeigen.js nach seinen
Bedürfnissen anpassen. (12. Zeile) Es empfiehlt sich, eine Farbe
für den Hintergrund zu definieren. Ohne Farbe bleibt diese Leiste transparent.
Tipp: Legen Sie ein externes Stylesheet an und definieren Sie die Klasse
span mit der Hintergrundfarbe Ihrer Wahl.
Dieses Script könnte Sie auch interessieren... Magnifying Glass