Mel : Nur Bilder Navigation, Headline, Lösungsidee

Beitrag lesen

Hallo Bernd,

es scheint ja keinen "Königsweg" zu geben.

Ja das sehe ich auch so ;) Vor einiger Zeit gab es Thread zu diesem Thema, da ging es darum wie die Navi von www.rammstein.de realisiert wurde. Die hat das so gelöst wie Du vorgeschlagen hast, also mit display: none;.

Man kann mit blind.gifs arbeiten um wenigstens den alt-text zu erhalten, dann das eigentliche Bild als Hintergrundbild via CSS dahinterlegen (so wie Du vorgeschlagen hast). Dann würde aber das <span class="hidden">zur Startseite</span> überflüssig werden, denn der alt-Text enthält ja diese Information schon. ich würde Dir empfehlen - falls Du einen hover-Effekt mit Bildwechsel eingeplant hast- das nicht so zu realisieren dass beim a:hover ein ANDERES HIntergrundbild geladen wird (das funktioniert nämlich im IE nicht so toll - bwz. stark verzögert). Stattdessen würde ich das mit einer einzigen Grafik lösen welche sowohl das eigentliche Bild als auch das hover-bild enthält. In der CSS-Datei definierst Du dann beim :hover eine Verschiebung des background-images. Aber das nur mal so am Rande ;)

Ich hatte neulich das gleiche Problem wie Du zu lösen und hab mich letzendlich doch dafür entschieden die Bilder als normale Grafiken einzubinden und den hover mit JS zu realisieren. Hat eine Menge Code gespart und war letztendlich doch eine relativ einfache und sichere Methode einen informationsverlust zu umgehen.

vg melanie

Was mir jetzt noch einfällt ...

<li><img src="blind.gif" alt="zur Startseite"><span class="hidden">zur Startseite</span></li>

1.) Das eigentliche Navigationsbild liegt als Hintergrundbild
2.) Das "blind.gif" ist ein transparentes gif o.ä.

Aber ob das die Sache besser macht?

Liebe Grüße,

Bernd