Website-Lupe - (2) Zoom-Dynamik (Für die Darstellung im Internet Explorer)

  • Um dynamische Zoom-Effekte zu erzielen, brauchen wir JavaScript und ein Formular. Das Formular dient als Steuerungswerkzeug und zur Kontrolle: Zwei Buttons erlauben, den Inhalt der Seite zu vergrößern oder verkleinern. Ein Feld zeigt den Zoom-Faktor an und ein dritter Button schließlich kümmert sich um das Zurücksetzen auf den ZoomFaktor 1. Kern der dynamischen Zoom-Seite sind vier JavaScript-Funktionen. Zunächst aber wird mit: <script language="Javascript"> i= 1; die für den Zoomfaktor zuständige Variable i initialisiert. Anschließend schreiben wir zwei Funktionen, die ihrerseits die Variable i um jeweils 0,1 hoch- oder herunter zählen. Ein Sicherheitsmechanismus verhindert beim Herunter zählen, dass ein Wert unter 0,5 erreicht wird. (Danach wäre kaum noch etwas vom Text zu erkennen). Die dritte der Funktionen setzt den Zoom-Faktor wieder auf 1. Falls mit dem Zoom beim Programmieren mal etwas schief geht, laden wir die Seite einfach neu. function zoomIn(){ i += 0.1; innerZoom(); }function zoomout(){if (i > 0.6) i -= 0.1; innerZoom();}function resetZoom() {i = 1;innerZoom();} Die beiden eben definierten Funktionen rufen ihrerseits die Funktion innerZoom() auf. Die leistet die eigentliche Zoom-Arbeit, weist dem Dokument einen Zoom-Faktor zu und schreibt den aktuellen Faktor in das Textfeld des Formulars: function innerzoom(){this.document.body.style.zoom=i; this.document.forms["formfaktor"]["faktor"].value=i;} Um die Seite in Betrieb zu nehmen, fehlen nur noch Formular und Testtext: <form name="formfaktor"> <input type=button name=plus value="+" onClick="zoomIn();" /> <input type=text name=faktor size=3 <input type=button name=plus value="-' onClick="zoomOut(); /> <input type=button name=reset value="reset"onClick="resetZoom();"/> Den im Formular definierten Buttons ist jeweils ein Funktionsaufruf in JavaScript zugeordnet. Das Textfeld mit Namen faktor stellt den aktuell gewählten Zoomfaktor dar. Dann brauchen wir nur noch ein wenig Text und vielleicht ein Bild zum zoomen. Sobald Sie das Dokument im Internet Explorer geladen haben, klicken Sie wahlweise auf die Plus- und Minus-Knöpfe. Sie sehen: Die komplette Seite wird größer und kleiner - selbst die Buttons ändern ihre Größe.