Hallo zusammen,
ich habe mir im Rahmen eines Javascript-Selbst-Testes eine kleine Bilder-Galerie gebastelt. Sie funktioniert auch recht gut würde ich sagen. Nun hätte ich aber noch gerne eine Zoom-Funktion. Ich habe gesehen, dass der Firefox das ganz gut macht, wenn man sich das Bild dort anzeigen lässt (also: Kontextmenü > Grafik anzeigen). Ich habe diese Seite so gut wie es mir möglich war versucht mit F12 zu durchleuchten:
- der Hintergrund kommt durch : body { background-image: url("chrome://global/skin/media/imagedoc-darknoise.png"); }
- das Bild wird zentriert durch : img { position: absolute; margin: auto; top: 0px; right: 0px; bottom: 0px; left: 0px; }
- die Lupen-Cursor über dem Bild kommen durch : .shrinkToFit { cursor: zoom-in; } und .overflowing { cursor: zoom-out; }
- ist das Bild nicht gezoomt hat es die Klasse .shrinkToFit und ein width und ein height Attribut - ist es gezoomt fallen diese Attribute weg und es besitzt die Klasse .overflowing
- im ungezoomten Zustand steht im title des Dokuments: "bild.jpg (JPEG-Grafik, [komplette_breite] × [komplette_höhe] Pixel) - Skaliert ([abgerundet(angezeigte_höhe / maximale_höhe * 100)]%)".
Im gezoomten Zustand fällt alles nach "Pixel)" weg
- das Bild hat im ungezoomten Zustand eine maximale Höhe, die der maximalen Tabgröße entspricht ohne Scrollbars zu erzeugen; die Höhe des Bildes passt sich vermutlich automatisch an. Genau diese Breite und Höhe werden dann auch in das width und height Attribut geschrieben.
Im gezoomten Zustand besitzt das Bild die komplette Breite und Höhe (also die Breite und Höhe wie man sie bei Bild > Eigenschaften > Details > Breite|Höhe angezeigt bekommt ==> Frage: wie komme ich an die Ausgangs-_Breite & -_Höhe?
- im Debugger werden mir keine Quellen angezeigt. Auch im Quelltext wird kein Javascript eingebunden. Also wie kann etwas passieren wenn ich auf das Bild klicke?
Was ich an der Firefox-Zoom-Funktion sehr schätze ist, dass genau der Bereich zentral angezeigt wird, auf dem sich der Mauszeiger zum Zeitpunkt des Klicks befindet (natürlich um so besser, je größer das Bild ist).
Kann mir jemand sagen, wo ich mir die FF-Zoom-Funktion ansehen kann? Ist sie öffentlich zugänglich?
Oder muss ich mir selbst eine Zoom-Funktion zusammen basteln? Wenn ja, wie gehe ich das am Besten an? Insbesondere mit dem Anzeigen des angeklickten Bildausschnittes.
LG, Lena