Website-Lupe - (5) Zoom für alle Browser

  • Bislang ist alles Zoomen vergebens, sobald der Client Netscape oder Mozilla heißt. Zoom ist eine Vorgabe technischer Art von Microsoft. Lediglich Opera hat eine eigene Zoomfunktion integriert. In dringenden Fällen gibt es eine Alternative zu zoom, nämlich hover. Diese CSS-Eigenschaft greift nur bei Links, also muss man ein wenig tricksen. Zum Beispiel so: <html><head><style type="text/css">a.test {color: black;text-decoration: none;}a:hover.test {font-size: 14pt;}</style><title>Zoom</title></head><body><p>Zoom-Test</p><a class="test" href="#"> Ein Test mit Hover</a> </body></html> Hier legen wir zunächst eine Stylesheet-Klasse für das a-Tag namens a.test an, weisen ihr schwarze Farbe zu und nehmen die Unterstreichung weg. Anschließend legen wir die Schriftgröße in Punkt fest, sobald sich der Mauszeiger über einem a-Element mit der Klasse test bewegt: Die Schrift wird größer. Auch hier sollten Sie nur geringe Abweichungen von der ursprünglichen Größe wählen. Denn ansonsten wird es zu unruhig. Überhaupt sollten Sie den Hover-Effekt sparsam einsetzen, denn er wirft in vielen Fällen sehr dynamisch das Seitenlayout durcheinander. Und: Arbeiten Sie bei solchen Hover-Tricksereien in jedem Fall mit Klassen. Anderenfalls erhalten alle Links dieses Aussehen und das zappelige Verhalten.