Dr. O. Hoffmann
Man sollte immer ehrlich spielen, wenn man die Trümpfe in der Hand hat.
Oscar Wilde
:hover
-Liste als zugängliche verweissensitive Graphik
oder ein sensitiver Bereich als Ersatz
für 'image-maps'
Das Pseudoformat :hover
wird in Kombination mit der Eigenschaft
display
immer wieder gerne verwendet, um Teilbereiche einer Seite
zunächst nicht anzuzeigen (display
: none) - einige Leute
nennen das auch 'rollover'-Effekt. Erst wenn die
Maus sich über einem bestimmten Bereich befindet (:hover
),
so wird der Inhalt an beliebiger Stelle angezeigt (display
: block).
Der zu überfahrende Bereich ist dabei ein (X)HTML-Element,
in dem sich der dynamisch anzuzeigende Bereich als eigenes
(X)HTML-Element befindet.
Ältere Darstellungsprogramme einschließlich aller microsoft internet-explorer
bis Version 6 sind oft nicht in der Lage, das Pseudoformat :hover
in vollem Umfange zu interpretieren. Durch einen Trick sollte dafür
gesorgt werden, daß diese Programme den Inhalt statisch anzeigen.
Am einfachsten ist es, dazu einen alternativen Stil auswählbar zu machen, der kein Pseudoformat :hover
verwendet.
Eine weitere Möglichkeit besteht darin, alles sichtbar zu lassen, solange sich kein Zeigergerät über
dem gesamten Dokument befindet, die gewünschten Dinge nur einzuklappen, wenn sich ein Zeigergerät
über dem Dokument befindet und dann mit dem :hover
beim gewünschten Element
wieder aufzuklappen.
Wenn in dem aufklappenden Bereich Verweise untergebracht sind, etwa wie
in einem Menü, muß dieser Bereich natürlich mit dem mit
:hover
angesprochenen in Verbindung stehen, damit die
Verweise überhaupt erreichbar sind.
Das Problem der Erreichbarkeit kann besonders auftreten, wenn
der aufklappende Bereich positioniert wird und dabei kein Überlapp
gewährleistet wird. Im Beispiel ist das der letzte Listenpunkt, bei dem
daher der Inhalt anders angeordnet wird als der
fixed-positionierte der anderen Punkte.
Spannend wird es bei diesem Aufklappen, wenn der Anzeigebereich eine
geringere Höhe hat als der Aufklappbereich, denn ein Rollen ist nur
möglich, wenn der Bereich selbst Rolleisten erhält.
Beispiel: CSS-Aufklappliste (pures CSS-'popup')
:hover
-Liste als zugängliche verweissensitive Graphik
oder ein sensitiver Bereich als Ersatz
für 'image-maps'
Durch das Pseudoformat :hover
können aus Listen ebenfalls sehr elegante
und flexible verweissensitive Graphiken konstruiert werden, die im Gegensatz
zu 'image-maps' auch zugänglich bleiben und bei deaktiviertem CSS als ganz normale
Listen erscheinen. Nicht nur Verweise können so realisiert werden sondern auch
das Einblenden beliebiger Informationsblöcke.
Beispiel 1 zeigt nun einen div
-Bereich, der absolut positioniert ist.
Das eignet sich also besonders für singuläre Lösungen auf
Einzelseiten. Die damit erkauften Vorteile liegen darin, daß das absolut
positionierte div
-Element einen neuen Anzeigebereich aufmacht,
sich also die Koordinaten der darin befindlichen Elemente relativ auf dieses
Element beziehen. Mittels position
: fixed
ist es aber immer noch möglich, aus diesem Anzeigebereich zu
entkommen und relativ zum Anzeigebereich zu positionieren.
Ähnliches wäre mit einer fixed-Positionierung zu
erreichen oder mit einer relativen Positionierung, wie es im zweiten
Beispiel realisiert ist - Vorteil hier ist, daß der div
-Bereich
immer noch mit dem sonstigen Inhalt mitfließt, die Absolutangaben
für eingeschlossene Elemente sich aber nach wie vor auf
die Koordinaten dieses Bereiches beziehen - das eignet sich also besonders, wenn der
sonstige Aufbau der Seite so komplex ist, daß eine Absolutpositionierung des
Bereiches nur schwierig sinnvoll vorauszuberechnen ist. Da offenbar der Konqueror (Version
3.2) durcheinander gerät, wenn in einem relativ positionierten Elemente nochmal
was relativ positioniert wird und dann noch mit :hover
eingeblendet wird, habe ich die inneren Positionierungen hier bei absolut gelassen -
da ist das Ergebnis ohnehin leichter nachzuvollziehen.
Beim dritten Beispiel ist die XHTML-Datei mit den
:hover
-Effekten mittels des Elementes object
eingebunden. Das hat den Vorteil, daß die CSS-Eigenschaften dieses Bereiches
komplett getrennt vom Rest definiert werden können, aber auch den Nachteil,
daß der Anzeigebereich auf das Element object
beschränkt
bleibt, auch für position
: fixed.
In jedem Falle ist darauf zu achten, daß mittels :hover
sichtbar
gemachte Teile der Seite nicht über eine plausible Größe des
Anzeigebereiches überstehen, weil sie sonst leicht für den Nutzer
unzugänglich werden.
Beispiel 1: sensitiver Bereich, absolut positioniert
Beispiel 2: sensitiver Bereich, relativ positioniert
Beispiel 3: sensitiver Bereich als Objekt eingebunden
Es geht natürlich auch umgekehrt - beim Drüberfahren über eine Liste werden
Informationen und andere oder zusätzliche Bilder eingeblendet und Stellen in Bildern markiert:
Beispiel 4: Informationen, Bilder und Markierungen einblenden
Das Beispiel zeigt allerdings auch, daß Nutzer mit kleinen Monitoren mit solch komplexen Anwendungen leicht in Schwierigkeiten gebracht werden können. Um zu zeigen, was bei alten browsern passiert, habe ich hier einmal auf die entsprechende Kompensation verzichtet. Programme ohne CSS werden gar keine Bilder anzeigen - die so vermittelte Bildinformation ist also eher als dekorativ und optional einzustufen.