HTML Hover ohne Javascript für die meisten Browser

[AndrewPoison]

Vorgeschichte:
meine Mutter hat vor Urzeiten mal eine Website gebaut, die auch heute noch ein ansehnliches Dasein fristet und wo viel Arbeit hineingeflossen ist. Allerdings besteht die Website aus Frames, ist relativ Browser-Unfreundlich und überhaupt ist der Sourcecode durch Nutzung von 3 oder 4 verschiedenen HTML-Editoren absolut uneinheitlich. Auch ist die Struktur der Website der Zeit nicht gewachsen, mit jeder Aktualisierung schwillt der Datenstrom an (eine manuelle Bildergalerie, wo für jedes neue Bild eine eigene HTML-Seite mit Bild, Thumbnail, Verlinkung zum nächsten, zur Galerie etc. pp. erstellt werden muss. Will man da "mal eben" 5 neue Bilder einstellen hat man die nächste Stunde zu tun.

Nun habe ich mich mal daran gemacht das alles ins Jahr 2009 zu holen. Ich habe von Grund auf Neu begonnen und erstmal die Frames entfernt und alles auf CSS-Basis aufgebaut - klappt hervorragend und ist weit weniger umständlich geworden. Später will ich Bildergalerie und alles andere mittels PHP und vlt. 'ner Datenbank soweit wie möglich automatisieren.

Problem:
Die Navigation der alten Seite sind Ostereier. Diese sind vorerst geschlossen, hovert man über sie gehen sie wie Überaschungseier auf und ein Text mit dem Inhalt erscheint (realisiert über zwei einfache GIF-Grafiken, die beim Hover wechseln). Dies will meine Mutter unbedingt behalten. Also es sollen nachwievor Eier sein, die sich beim hovern öffnen.

Allerdings habe ich keine Möglichkeit gefunden, dass die meisten Browser damit umgehen können. Zuerst habe ich die Eier mittels eigener CSS-Klassen positioniert (sie hängen an einem Baum, sind also nicht einfache Links untereinander sondern "irgendwo im Raum") und über die background-image-Eigenschaft das Start-Bild festgelegt. Dann von der Klasse noch einer :hover-Version erstellt, mit der neuen Grafik. Unter W3C-kompatiblen Browsern wie FF funktioniert das einwandfrei. Aber der IE sträubt sich dagegen, nach Recherchen stellte sich heraus dass erst der IE 7 die Fähigkeit besitzt, über andere Elemente als Links zu hovern (es hilft auch nicht, das DIV-Element mit nem Hyperlink zu umschließen).

Bisher wird der Wechsel der GIF-Grafiken über einen JavaScript-Effekt ausgelöst. Das hat den Nachteil, das die neueren IE-Versionen den Anwender erstmal fragen, ob sie denn JavaScript zulassen möchten - tun sie es nicht, sehen sie nicht was sich hinter der Navigation verbirgt.

Auf JavaScript möchte ich unbedingt verzichten, da das Publikum der Seite vornehmlich älteren Jahrgangs ist und bei Sicherheitsabfragen dieser Art eher tendieren auf "Nein" zu klicken oder komplett die Website zu verlassen.

Die Frage stellt sich nun: wie bekommt man einen Hover-Effekt hin, der auf IE (5.5 oder 6 aufwärts) und W3C-kompatiblen Browsern läuft und beim IE keine Sicherheitsabfrage erscheint.

Mir wäre noch in den Sinn gekommen, die Navigations-Eier noch über Flash zu realisieren. Aber da ist wieder die Sache: wer Flash nicht hat, der hat keine Navigation. Überdies weis ich nicht, in wie weit Flash Transparenz zur Website unterstützt, damit das Hintergrundbild zu sehen ist.

Anders als bei Seiten wie CB und Co., die ein jüngeres und erfahreneres Publikum ansprechen kann ich wie gesagt bei dieser Website nicht davon ausgehen, dass die Nutzer mit den aktuellsten Browsern, Flash und aktiviertem (bzw. bestätigtem) JavaScript unterwegs sind.

Da meine Mutter aber wie erwähnt unbedingt diesen Hover-Effekt haben will blieb mir nun erstmal nichts weiter übrig als euch zu fragen: kennt ihr noch eine Variante, das ganze umzusetzen? Es sollte so Rudimentär wie möglich sein.

 

[Simpson474]

Der Internet-Explorer warnt standardmäßig nicht bei Javascript - da muss schon was an den Einstellungen verstellt worden sein oder irgendeine Toolbar ist installiert worden.

 

[AndrewPoison]

Weil du's gerade sagst, hab ich die Website nochmal aufgerufen... wenn ich sie lokal öffne, warnt er. Online warnt er nicht. Dachte, ich hätte das mal irgendwie in die Ausnahmen hinzugefügt oder soetwas.

Wenn der IE standardmäßig wirklich nicht warnt, dann könnt ich ja wieder das JavaScript verwenden. Wundert mich trotzdem irgendwie

 

[Mr. Snoot]

Die Warnung kommt in der Tat nur offline - frag mich nicht wieso, ist aber so

 

[Darii]

Prinzipielle Anmerkung: Ich würde generell nie davon ausgehen dass JS aktiviert ist. Die Seite sollte immer auch ohne Javascript funktionieren.

 

[muhkuher]

Das geht alles mit CSS-Sprites (einfach mal danach googeln). Dabei sind sämtliche Stati der Naviation in einer Datei gespeichert, beim Überfahren mit der Maus oder einem Klick wird dann lediglich die Position des Hintergrundbildest vertikal oder horizontal verschoben.

Insgesamt solltest du aber darauf achten, dass eine Website auch mit ausgeschaltetem JS, CSS und Flash sowieso vollständig benutzbar ist.

 

[Turbostaat]

Das ganze geht auch ohne JAvascript rein mit CSS. Allerdings könnte es schwierig werden für Browser der Generation IE 5.5, ab IE6 sollte es gehen.

 

[AndrewPoison]

"Funktionieren" tuts dann zumindest soweit, dass man die Navigation benutzen (klick -> Seitenwechsel) kann. Dass es dann nicht hovert.. naja... irgendwo muss man halt Einschnitte machen. Hätte die Navigation, wenn meine Mutter nicht darauf bestanden hätte, ja sowieso geändert.

Nagut, ich bastel die duzend Navigationspunkte dann mal zusammen und guck, ob mir noch irgend ein grobes Problem auffällt.

Danke soweit.

/edit: @Turbostaat: so hab ichs ja zuerst probiert, aber der IE6 hats bei mir partout nicht umsetzen wollen - erst IE7 machts korrekt.
@muhkuher: okay... das probier ich mal (könnte dann auch das sein, was Turbostaat meinte).

 

[hurga_gonzales]

Hiho,

auch der IE6 intepretiert nur in a-Tags mit enthaltenem href die Pseudoklasse "hover".
Meiner Meinung nach gibt es nur die JS- oder Flash-Lösung, wobei ich Dir eher und der Einfachheit halber zu JS raten würde.
Einfach eine Funktion in eine JS Datei packen, in welcher die Backgrounds getoggelt werden und die Funktion bei mouseover und mouseout aufrufen. Beim Aufruf der Funktion die ID des jeweiligen Elements mitgeben.

Im JS fragst Du dann den aktuell zugewiesenen Style der ID ab und änderst entsprechend in das Gegenteil.

Das DIV mit einem <a> zu umschließen ist in höchstem Maße gegen den W3C Standard und solltest Du besser nicht machen.

Einen Versuch wäre es noch wert, normale Links mit im CSS definierten Bild-Hintergründen zu belegen, welche bei Hover wechseln. Das sollte dann auch der IE6 verstehen.

Im Übrigen darfst Du den IE6 bald getrost vergessen, weil der IE8 im Anmarsch ist. Irgendwann muss mit dem Abwärtsgedudel auch mal Schluss sein.

 

[moorpheus]

Damit auch Leute richtig navigieren können, bei denen das Ei-Öffnen nicht funktioniert: Wie wärs mit Tooltips ( Alternativtext zum jeweiligen Ei )?

 

[muhkuher]

Hiho,

auch der IE6 intepretiert nur in a-Tags mit enthaltenem href die Pseudoklasse "hover".
Meiner Meinung nach gibt es nur die JS- oder Flash-Lösung, wobei ich Dir eher und der Einfachheit halber zu JS raten würde.
Einfach eine Funktion in eine JS Datei packen, in welcher die Backgrounds getoggelt werden und die Funktion bei mouseover und mouseout aufrufen. Beim Aufruf der Funktion die ID des jeweiligen Elements mitgeben.

Im JS fragst Du dann den aktuell zugewiesenen Style der ID ab und änderst entsprechend in das Gegenteil.

Das DIV mit einem <a> zu umschließen ist in höchstem Maße gegen den W3C Standard und solltest Du besser nicht machen.

Einen Versuch wäre es noch wert, normale Links mit im CSS definierten Bild-Hintergründen zu belegen, welche bei Hover wechseln. Das sollte dann auch der IE6 verstehen.

Im Übrigen darfst Du den IE6 bald getrost vergessen, weil der IE8 im Anmarsch ist. Irgendwann muss mit dem Abwärtsgedudel auch mal Schluss sein.

Mit Verlaub ist da ziemlich viel Mist dabei. Für die Umsetzung seines Problems braucht er kein Stück JS oder Flash. Es sei denn, er möchte Effekte mit drin haben.

Das mit dem CSS-Sprites ist wirklich einfach. Alles, was man braucht ist eine Grafik, die alle Stati der Navigation in einer Datei. Ob man nun für jeden Menüpunkt eine eigene Datei nimmt oder im besten Fall für alle Menüpunkte einen Hintergrund und die Beschriftung richtigerweise über den Inhalt anzeigt. Die Herangehensweise ist in beiden Fällen die gleiche.

Die Datei: Mein Beispielmenü hat eine Breite von 160 Pixeln, jeder Menüpunkt eine Höhe von 30 Pixeln. Die Grafik sieht mit den drei Hintergründen für den Link (rot), beim Überfahren mit der Maus (orange/braun) und beim Klicken und der aktive Menüpunkt (beides lila).

Das Grundgerüst für das Menü sieht so aus:

...
<ul id="navigation">
    <li><a href="#" title="Startseite">Startseite</a></li>
    <li><a href="#" title="Kontakt">Kontakt</a></li>
    <li class="active"><a href="#" title="Forum">Forum</a></li>
    <li><a href="#" title="Impressum">Impressum</a></li>
</ul>
...

Dazu kommt folgender CSS-Code

ul#navigation {
    list-style: none;
    margin: 0;
    padding: 0;
}
#navigation li {
    width: 160px; /* Breite schon hier festlegen, damit keine Probleme beim Box-Model des IE =< 6 auftreten */
}
#navigation li a {
    background: #bd1717 url('background-navigation.png') 0 0 no-repeat;
    color: #fff;
    display: block; /* Damit die ganze Fläche klickbar wird */
    font: bold 16px/20px Calibri, Arial, sans-serif;
    line-height: 20px;
    padding: 5px 10px;
}
#navigation li a:active, #navigation li.active a {
    background-color: #6f17bd; /* Hintergrundfarbe anpassen (lila) */
    background-position: 0 -60px; /* Hintergrundbild um 60 Pixel nach unten schieben */
}
#navigation li a:hover, #navigation li a:focus {
    background-color: #bd8017; /* Hintergrundfarbe anpassen (orange/braun) */
    background-position: 0 -30px; /* Hintergrundbild um 30 Pixel nach unten schieben */
}

Das Beispiel müsste so funktionieren, ausprobiert habe ich es jetzt aber noch nicht. Wenn du für jeden Navigationspunkt ein anderes Hintergrundbild hast, dann musst du nur jedem Navigationspunkt eine eigene Klasse zuteilen und dann im Stylesheet über diese Klasse das Hintergrundbild auswechseln. Der Menütext sollte trotzdem vorhanden sein, damit die Seite auch ohne CSS nutzbar bleibt. Ausblenden kannst du den Text dann über die Eigenschaft text-indent:

#navigation li a {
    ...
    text-indent: -9999em;
}

Das sorgt dafür, dass der Menütext um 9999em nach links aus dem Viewport verschoben wird.

 

[Darii]

Der Menütext sollte trotzdem vorhanden sein, damit die Seite auch ohne CSS nutzbar bleibt. Ausblenden kannst du den Text dann über die Eigenschaft text-indent:

#navigation li a {
    ...
    text-indent: -9999em;
}

Das sorgt dafür, dass der Menütext um 9999em nach links aus dem Viewport verschoben wird.

Das Problem ist weniger, dass das Menü auch ohne CSS benutztbar sein sollte, sondern, dass es auch ohne Bilder(Barrierefreiheit) auskommen sollte und da ist das eher eine schlechte Idee.

 

[muhkuher]

Im Zweifelsfall hast du da absolut Recht. Allerdings würde ich eine Navigation allein über Bilder sowieso nicht empfehlen. Leider ist mir aber außer dieser Methode keine bekannt, die Browserübergreifend dafür sorgt, dass man über Bilder navigiert und gleichzeitig den Menütext komplett barrierefrei verbirgt. Das Zurücksetzen der Schriftgröße auf 0 funktioniert ja bekanntermaßen nicht für alle Browser und würde auch nur dazu führen, dass der Text ohne Grafiken nicht lesbar ist.
Die von mir genannte Methode sorgt immerhin dafür, dass die Seite für prinzipiell alle Benutzarten - außer der mit ausgeblendeten Grafiken - zugänglich ist. Image-Replacement fällt auch flach, weil die gleichen Techniken verwendet werden.

 

[Darii]

Wenn man unbedingt Bilder derart für die Navigation verwenden möchte dass man die Schrift verbergen muss, dann muss man halt auch Bilder nehmen(<img>), die haben ein alt-Attribut. Wenn man solche Hacks verwendet ist die Gefahr recht groß, dass das bei irgendwem Nebenwirkungen hat.