Website-Lupe - (1) CSS-Eigenschaft "zoom" (Für die Darstellung im Internet Explorer)

  • Mit der Cascading Style Sheets (CSS)-Eigenschaft "zoom" erlaubt der Internet Explorer (IE), Inhalte auf Webseiten in ihrer Größe zu verändern. Dieses Thema ist sehr interessant, und es gibt viele visuelle Möglichkeiten. Der Menge an Erklär-Text Rechnung tragend werden wir mehrere Fortsetzungen daraus machen. Der IE interpretiert die Cascading Style Sheets (CSS)-Eigenschaft "zoom". Diese kann auf jedes beliebige Element einer HTML-Seite angewandt werden. Der Sinn hinter Zoom: Eine Webseite soll sich in beliebiger Vergrößerung ansehen lassen. Das hilft beispielsweise sehbehinderten Lesern, die Texte und Bilder größer anzeigen lassen wollen. Auch der Webdesigner hat etwas vom Zoom. Er hat damit ein Werkzeug für schicke Bild- und Texteffekte in seinen Dokumenten. In der einfachsten Form geschieht das Zoomen über eine Zuweisung im Stylesheet: <style type="text/css"> body {zoom: 1;} </style> Hier wird dem Body der Zoom-Faktor 1 zugewiesen. Alternativ dürfen auch Prozentzahlen angeben werden, z. B. 100 Prozent. Die 1 im Zoomfaktor steht für die Originalgröße. Ändert man die Zoom-Angabe beispielsweise in body {zoom: 1.2;} und lädt das Dokument neu im IE, so erscheint der kurze Testtext um das 1,2fache größer - die entsprechende Prozentzahl wäre 120%. Es ist darauf zu achten, dass in Javascript ein Punkt als Dezimaltrenner dient: 1.2 (kein Komma)! Man kann den Zoom-Faktor auch direkt in einem Element zuweisen und dem Ganzen eine gewisse Dynamik verpassen. <Span onmouseover="this.style.zoom=1.2" onmouseout="this.style.zoom=l"> Noch ein Test</span> Sobald der Mauszeiger über den Text fährt, erscheint dieser um den Faktor 1,2 vergrößert. Nach Verlassen des Bereichs zieht sich der Text zurück auf Originalgröße. Damit darf man sich an die ersten Programmier-Experimente wagen.