image replacement - Lösung für css an, Bilder aus?

[apsel]

Om nah hoo pez nyeetz,

In einem Artikel auf meiert.com sind verschiedene Varianten zu image-replacement vorgestellt. Als Problem wird immer genannt: "CSS an, Bilder aus". Das leuchtet auch ein.

Ich denke, eine Lösung gefunden zu haben, die unter http://selfhtml.apsel-mv.de/menu/menu.html begutachtet werden kann. Es ist bisher noch nicht aufgehübscht und für eine Navigationsliste gedacht, sollte aber für alle Elemente funktionieren.

Grundidee: Die Grafik wird einmal als Hintergrund des Elementes definiert und einmal kommt sie als img-Element in den Quelltext. Sodann wird der Text des Elementes mit text-indent weit nach links geschoben und das Bild mit margin-left weit nach rechts. Das hat folgende Wirkungen:

#1# css an, bilder an: Die Hintergründe werden wie gewünscht angezeigt, der Text befindet sich weit links und die Grafik weit rechts.

#2# css an, bilder aus: Der Text befindet sich weit links, die Grafik wird jetzt vom Text aus zurückgeschoben und die alt-Texte befinden sich im Anzeigebereich. Das Menu ist bedienbar.

#3# css aus: Das Menu ist bedienbar.

positiv getestet in FF3.6, Opera10.51, IE8 als IE8, IE 8 als IE7

keine Funktion in Safari4.0.4, Chrome4.

die beiden letztgenannten scheinen das Nicht-Darstellen der Grafiken anders umzusetzen als die anderen.

Was meint ihr dazu?

Matthias

[suit]

Grundidee: Die Grafik wird einmal als Hintergrund des Elementes definiert und einmal kommt sie als img-Element in den Quelltext.

Dir ist aber schon klar, dass der Sinn einer Image-Replacement-Technik ist, dass man eben kein img-Element benötigt?

[Beat]

Grundidee: Die Grafik wird einmal als Hintergrund des Elementes definiert und einmal kommt sie als img-Element in den Quelltext.
Dir ist aber schon klar, dass der Sinn einer Image-Replacement-Technik ist, dass man eben kein img-Element benötigt?

Ich glaube du darfst jetzt aufhören den Kopfstand zu üben.
Das zu ersetzende war schon immer Text.

mfg Beat

[apsel]

Om nah hoo pez nyeetz, suit!

Der Begriff "Image-Replacement" scheint unglücklich gewählt. Er bedeutet "ersetzen _durch_ Grafik" nicht "ersetzen _einer_ Grafik".

Matthias

[MudGuard]

Hi,

Grundidee: Die Grafik wird einmal als Hintergrund des Elementes definiert und einmal kommt sie als img-Element in den Quelltext.

Wenn Du ohnehin ein img-Element benutzt, wozu dann der Aufwand mit dem Hintergrundbild?
Der Text kommt dann einfach ins alt-Attribut.

Bilder an: das Bild wird angezeigt.
Bilder aus: der Text wird angezeigt.

Was meint ihr dazu?

image replacement falsch verstanden. Dabei geht es normalerweise darum, Text durch eine Graphik zu ersetzen (um den Text, der für die Suchmaschine wichtig ist, mit einer hübscheren Schrift, die beim User aber ggf. nicht installiert ist, darzustellen), nicht eine Graphik durch eine (identische Hintergrund-) Graphik zu ersetzen.

cu,
Andreas

[apsel]

Om nah hoo pez nyeetz, MudGuard!

image replacement falsch verstanden.

Ich hoffe nicht.

Dabei geht es normalerweise darum, Text durch eine Graphik zu ersetzen (um den Text, der für die Suchmaschine wichtig ist, mit einer hübscheren Schrift, die beim User aber ggf. nicht installiert ist, darzustellen), nicht eine Graphik durch eine (identische Hintergrund-) Graphik zu ersetzen.

Das dürfte vor allem die Semantiker stören. <h1>wichtige Überschrift</h1> ist nun mal was anderes als <h1><img src="foo" alt="wichtige Überschrift"></h1>. Also weicht man auf CSS-Lösungen aus. [siehe Meiert].

Matthias

[Beat]

Das dürfte vor allem die Semantiker stören. <h1>wichtige Überschrift</h1> ist nun mal was anderes als <h1><img src="foo" alt="wichtige Überschrift"></h1>. Also weicht man auf CSS-Lösungen aus. [siehe Meiert].

Ich denke kaum, dass das die Semantiker stört, aber SEO Freaks werden da fiebrig ihre Zauberbücher konsultieren.

Ich sehe auch eher <a href="#" class="close">schliessen</a> als Kandidaten. Wenn in meiner GUI das im Dutzend auftaucht, werde ich die kürzere Codevariante bevorzugen, zumal ich solche Buttons dann noch als Sprites ausliefere

mfg Beat

[Gunnar Bittersmann]

@@apsel:

nuqneH

Das dürfte vor allem die Semantiker stören. <h1>wichtige Überschrift</h1> ist nun mal was anderes als <h1><img src="foo" alt="wichtige Überschrift"></h1>.

Weil der Text im Attributwert statt im Elementinhalt steht?

XHTML 2 hätte die Antwort darauf gehabt: <h1 src="foo">wichtige Überschrift</h1>

Oder meinetwegen auch <h1><img src="foo">wichtige Überschrift</img></h1>

Letzteres ist auch mit HTML 4/XHTML 1 möglich:
<h1><object type="image/png" data="foo">wichtige Überschrift</object></h1>

Oder weil "foo" überhaupt im Markup auftaucht?

Qapla'

[apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

<h1><img src="foo" alt="wichtige Überschrift"></h1>.

Diese Möglichkeit gibt es ja schon lange. Also ist image-replacement ansich nicht mehr notwendig / nicht zeitgemäß / unsinnig??

Matthias