Navigation durch Grafik ersetzen

[Anton]

Hi,

meine linke Navigationsleiste habe ich per CSS formatiert. In Zukunft möchte ich für die ganze Navigation eine Grafik bzw. mehrere (ich weiß nicht genau ob ich die Grafik zerschneiden muß) verwenden.

Ich bin mir bezüglich des richtigen Vorgehens nicht ganz sicher. Kann ich hier mit Image-Replacement arbeiten und einfach die komplette Liste die momentan noch der CSS formatiert wird durch eine Grafik überdecken oder sollte ich das besser anders machen?

[ChrisB]

Hi,

meine linke Navigationsleiste habe ich per CSS formatiert. In Zukunft möchte ich für die ganze Navigation eine Grafik bzw. mehrere (ich weiß nicht genau ob ich die Grafik zerschneiden muß) verwenden.

Je weniger einzelne HTTP-Requests notwendig sind, desto schneller das initiale Laden einer Seite.
Deshalb empfiehlt es sich oftmals, wenn moeglich eine groessere statt mehrerer kleinerer Grafikressourcen zu verwenden.

Ich bin mir bezüglich des richtigen Vorgehens nicht ganz sicher. Kann ich hier mit Image-Replacement arbeiten und einfach die komplette Liste die momentan noch der CSS formatiert wird durch eine Grafik überdecken oder sollte ich das besser anders machen?

Entweder nutzt du eine Image-Replacement-Technik fuer die einzelnen Links, oder gleich eine Image Map.
Ersteres kann kritisch sein, wenn der Nutzer zwar CSS aktiviert, die Darstellung von Bildern jedoch deaktiviert hat. Ein grosser Teil der gaengigen Image-Replacement-Techniken liefert in diesem Falle gar nichts; da ist also aufpassen angesagt.

MfG ChrisB

[Anton]

Entweder nutzt du eine Image-Replacement-Technik fuer die einzelnen Links, oder gleich eine Image Map.
Ersteres kann kritisch sein, wenn der Nutzer zwar CSS aktiviert, die Darstellung von Bildern jedoch deaktiviert hat. Ein grosser Teil der gaengigen Image-Replacement-Techniken liefert in diesem Falle gar nichts; da ist also aufpassen angesagt.

Wozu würdest du mir denn raten. Nachdem was du schreibst wäre es meines erachtens am besten einfach eine Imagemap über die Liste zu legen. Dann würde ich bei ausgeblendeten Grafiken und aktiviertem CSS meine mit CSS formatierte Liste sehen.

[ChrisB]

Hi,

Nachdem was du schreibst wäre es meines erachtens am besten einfach eine Imagemap über die Liste zu legen.

Wieso ueber?
Die Liste kann entfallen.

Dann würde ich bei ausgeblendeten Grafiken und aktiviertem CSS meine mit CSS formatierte Liste sehen.

Die Image Map bringt den Fallback fuer den Fall, dass keine Grafiken angezeigt werden, schon von Haus aus mit - dann zeigt sie die Areas als normale Links.

MfG ChrisB

[Anton]

Die Image Map bringt den Fallback fuer den Fall, dass keine Grafiken angezeigt werden, schon von Haus aus mit - dann zeigt sie die Areas als normale Links.

Dieser Fallback funktioniert bei mir aber nicht. Ich hab diese Seite aufgerufen:

<http://de.selfhtml.org/html/grafiken/anzeige/img_usemap.htm@title=Image Map>

und die Grafiken ausgeblendet. Dann wird einfach nur "Karte" eingeblendet. Von den Links ist nichts zu sehen.

[Anton]

Hi,

Nachdem was du schreibst wäre es meines erachtens am besten einfach eine Imagemap über die Liste zu legen.

Wieso ueber?
Die Liste kann entfallen.

Dann würde ich bei ausgeblendeten Grafiken und aktiviertem CSS meine mit CSS formatierte Liste sehen.

Die Image Map bringt den Fallback fuer den Fall, dass keine Grafiken angezeigt werden, schon von Haus aus mit - dann zeigt sie die Areas als normale Links.

MfG ChrisB

Ich habe mir das mit den Image-Maps gerade nochmal angeschaut. Hier stören mich so einige Dinge:

1.)
Bei Imagemaps handelt es sich ja nicht um eine Hintergrundgrafik. Ich binde sie also nicht per CSS sondern direkt im Markup ein. Hier sehe ich als Nachteil, dass die Map in jede HTML-Datei mit Hilfe von "image" eingebunden werden muß. Die Image-Map die hier die Navigationsleite wiederspiegelt ist Bestandteil des Layouts. Also müßte sie streng genommen mit Hilfe von CSS per background eingebunden werden, um zu gewährleisten, das Inhalt und Formatierung getrennt sind.

2.)
Ich habe das mal getestet. Ich habe mir eine Image-Map eingebunden. Für die einzelnen areas hab ich auch dem jeweiligen Attribut "alt" einen String zugewiesen. Anschließend habe ich die Grafiken ausgeblendet. Nun werden aber keine Links für die einzelnen areas angezeigt. Das einzige was angezeigt wird ist das alt Attribut von "image". Soviel zum Fallbackfall, wenn die Grafiken ausgeblendet werden. Was mache ich denn hier falsch?. Warum werden die Links der einzelnen areas nicht angezeigt?

3.)
Wie kommen Suchmaschinen damit klar, wenn ich mit Image-Maps arbeite? Ich meine was ist, wenn ich für meine Navigation eine Image-Map verwende? Erkennen die Suchmaschinen die Verweise dann genauso, als wenn ich mit einer normalen Liste als Navigation arbeiten würde?

[ChrisB]

Hi,

Ich habe das mal getestet. Ich habe mir eine Image-Map eingebunden. Für die einzelnen areas hab ich auch dem jeweiligen Attribut "alt" einen String zugewiesen. Anschließend habe ich die Grafiken ausgeblendet. Nun werden aber keine Links für die einzelnen areas angezeigt. Das einzige was angezeigt wird ist das alt Attribut von "image". Soviel zum Fallbackfall, wenn die Grafiken ausgeblendet werden. Was mache ich denn hier falsch?. Warum werden die Links der einzelnen areas nicht angezeigt?

K.A.
Ich habe das mit dem SELFHTML-Beispiel im Opera ausprobiert, und der zeigt mir die Areas als Links an.

MfG ChrisB

[Anton]

K.A.
Ich habe das mit dem SELFHTML-Beispiel im Opera ausprobiert, und der zeigt mir die Areas als Links an.

Mit dem Opera klappt es bei mir auch. Mit dem Firefox allerdings nicht. Weder in der 2er noch in der 3er Version.

Wärst du so nett und schreibst mir mir auch noch deine Meinung zu diesem Thread. Würde mich sehr interessieren.

suit macht das wenn er eine Navigationliste grafisch gestalten will anders. Er hatte da mal ein ziemlich gutes Beispiel ins Netz gestellt. Ich habe ihn in diesem Thread darum gebeten es nochmal online zu stellen. Du kannst ja mal reinschauen wenn es er mir den Gefallen tut und es nochmal online stellt.

[suit]

Ich bin mir bezüglich des richtigen Vorgehens nicht ganz sicher. Kann ich hier mit Image-Replacement arbeiten und einfach die komplette Liste die momentan noch der CSS formatiert wird durch eine Grafik überdecken oder sollte ich das besser anders machen?

ich würde 1 bild nehmen und entsprechend positionieren und beim
rollover verschieben

als image-replacement-methode eignet sich imho die gilder-levin-methode am besten, allerdings führt das im ie6 zu einer "flacker-verhalten", darum bekommt der eine alternative mittels phark-methode (damit geht zwar css-an/bilder-aus nicht, aber das ist ihmo zu verschmerzen beim ie6)