Anzeige von Alternativtext erzwingen

[Bademeister]

Hi,

ich würde gerne bewirken, dass beim Besuchen meiner Website mit Handys und derartigem anstatt einiger Bilder, die in der Website eingebaut sind, deren "alt"-Text angezeigt wird. Im besten Falle per css, aber da habe ich keine Hinweise darauf gefunden, dass dies geht.

Alternativ fiele mir, wenn überhaupt, nur die etwas unelegeante Methode ein, per Javascript die Adresse der Bilder in eine nicht existierende zu ändern.

Daher möchte ich gerne fragen:

1. Geht das (auf elegante Weise, bestenfalls per CSS)?

2a. Kann man denn eigentlich JavaScripts separat für mobile Geräte einbinden, ähnlich wie Stylesheets? http://de.selfhtml.org/javascript/intro.htm#javascriptdateien@title=SelfHTML hat dazu nichts im Angebot.

2b. Interessehalber: Wie verbreitet ist denn eigentlich JavaScript auf mobilen Geräten - sowohl das technische Vorhandensein als auch, falls es da Zahlen gibt, die Nutzung?

Vielen Dank und Grüße,
der Bademeister

[bleicher]

Grüße,
so auf die schnelle ergoogelt:
http://css-tricks.com/nine-techniques-for-css-image-replacement/
http://schoberg.net/2008/09/ultimate-image-replacement/
MFG
bleicher

[Bademeister]

Hi bleicher,

http://css-tricks.com/nine-techniques-for-css-image-replacement/
http://schoberg.net/2008/09/ultimate-image-replacement/

beim "Image Replacement" hier wird aber Text durch ein Bild "ersetzt". Das suche ich nicht, ist quasi die falsche Richtung.

Danke trotzdem, Gruß
der Bademeister

[Hans]

Hi,

wie wäre es, wenn du mittels der opacity-Eigenschaft einen nicht sichtbaren Text über das Bild legst, welcher logischerweise nur angezeigt wird, wenn das Bild nicht dargestellt werden kann.
Außerdem könnte man doch per Javscript prüfen, ob Bilder vorhanden sind (document.images()).

gruß Hans

[Bademeister]

Hi Hans,

wie wäre es, wenn du mittels der opacity-Eigenschaft einen nicht sichtbaren Text über das Bild legst, welcher logischerweise nur angezeigt wird, wenn das Bild nicht dargestellt werden kann.

Die Bilder können doch dargestellt werden. Ich will das nur nicht.

Viele Grüße,
der Bademeister

[Auge]

Hallo

»» wie wäre es, wenn du mittels der opacity-Eigenschaft einen nicht sichtbaren Text über das Bild legst, welcher logischerweise nur angezeigt wird, wenn das Bild nicht dargestellt werden kann.

Die Bilder können doch dargestellt werden. Ich will das nur nicht.

Lies mal das hier: Angepasste Inhalte für mobile Endgeräte. Der Artikel ist zwar mittlererweile fast vier Jahre alt und manches mag auf die heutzutage verbreiteten "Mobile Devices" nicht mehr zutreffen, aber die Grundrichtung stimmt (mMn).

Tschö, Auge

[Bademeister]

Hi Auge,

Lies mal das hier: Angepasste Inhalte für mobile Endgeräte.

ich hatte mir den Artikel schon mal angesehen und davon aber zunaechst Abstand genommen, weil ich gehofft hatte, das auf CSS-Ebene zu loesen, um es auch fuer statische Seiten hinzubekommen.

Aber nun beginne ich langsam damit, mich mit einer PHP-Loesung anzufreunden. Im Grunde ist es ja nur konsequent - wenn auf mobilen Geraeten keine Bilder angezeigt werden sollen, dann gibt es auch keinen guten Grund, warum sie im HTML-Code stehen sollten.

Danke, viele Gruesse
der Bademeister

[Auge]

Hallo

»» Lies mal das hier: Angepasste Inhalte für mobile Endgeräte.

ich hatte mir den Artikel schon mal angesehen und davon aber zunaechst Abstand genommen, weil ich gehofft hatte, das auf CSS-Ebene zu loesen, um es auch fuer statische Seiten hinzubekommen.

Für statische Seiten wäre noch eine Erkennung (per .htaccess? jedenfalls direkt durch den Webserver) und Weiterleitung auf ein von vornherein angepasstes Angebot (z.B. auf mobile.example.com) möglich. Ob eine solche Erkennung besser und auf einem konkreten Server funktioniert (Stichwort: Shared Hosting), ist eine andere Sache.

Aber nun beginne ich langsam damit, mich mit einer PHP-Loesung anzufreunden. Im Grunde ist es ja nur konsequent - wenn auf mobilen Geraeten keine Bilder angezeigt werden sollen, dann gibt es auch keinen guten Grund, warum sie im HTML-Code stehen sollten.

Richtig, Sachen, die in einem konkreten Fall nicht dargestellt werden sollen, müssen auch keinen unnötigen Traffic erzeugen. Zumal bei einer CSS-Lösung, wie immer die aussieht, ein Problem bleibt. Das ist der Umgang von Mobilbrowsern mit CSS. Einige verstehen den dafür vorgesehenen Media-Query "handheld" einfach nicht, andere sollen die Seite wie gewohnt ausliefern, richten sich also bewusst nach "screen" (oder ignorieren die Media-Queries vollständig) bzw. bewusst *nicht* nach "handheld" (z.B. der Browser des iPhones).

Das muss zwar auch bei einer PHP- oder WasAuchImmer-basierten Lösung berücksichtigt werden, die Kontrolle darüber ist aber größer (wenn man mal von der Frage absieht, ob man überhaupt alle Möglichkeiten erwischt).

Tschö, Auge

[Bademeister]

Hi

Für statische Seiten wäre noch eine Erkennung (per .htaccess? jedenfalls direkt durch den Webserver) und Weiterleitung auf ein von vornherein angepasstes Angebot (z.B. auf mobile.example.com) möglich.

Klar, das waere prima, aber das ist mir zu viel Arbeit.

Zumal bei einer CSS-Lösung, wie immer die aussieht, ein Problem bleibt. Das ist der Umgang von Mobilbrowsern mit CSS. Einige verstehen den dafür vorgesehenen Media-Query "handheld" einfach nicht, andere sollen die Seite wie gewohnt ausliefern, richten sich also bewusst nach "screen" (oder ignorieren die Media-Queries vollständig) bzw. bewusst *nicht* nach "handheld" (z.B. der Browser des iPhones).

Hmmm, nein, in meinem Fall eigentlich nicht, Probleme sehe ich nun eher bei der PHP-Loesung, aus folgendem Grund:

Ich habe kuerzlich mal ein Handheld-Stylesheet geschrieben, das der Seite ein kompaktes Layout verpasst, das fuer Bildschirmgroessen von Handys geeignet ist. Und da passen die Bilder (es geht um Logos) eben nicht rein und ich moechte auf Text-Beschriftungen umsteigen.

Wenn nun einer das Handy-Layout ohnehin ignoriert, dann soll er auch ruhig die Bilder laden, ins eigentliche Layout passen die ja prima rein. Insofern waere eine CSS-Loesung schon optimal.

Probleme kommen allerdings bei der PHP-Loesung auf, wenn $_SERVER["HTTP_USER_AGENT"] einen Handy-Benutzer suggeriert, dieser aber auf das Handheld-Stylesheet pfeift und sich das normale Layout antun will. Denn dem werden die Bilder vorenthalten.

Um das zu verhindern, muesste ich also das alternative Stylesheet nicht generell mit media="handheld" ausliefern, sondern auch dynamisch mit media= "all" einbinden, wenn $_SERVER["HTTP-USER-AGENT"] einen Handynutzer suggeriert.
Ich wuerde aber eigentlich schon lieber dem User die Wahl lassen, ob er Handy- oder normales Layout haben will - ist ja sein Bier.

Schwierig, schwierig....

viele Gruesse
der Bademeister

[Gunnar Bittersmann]

@@Bademeister:

nuqneH

Schwierig, schwierig....

http://www.alistapart.com/articles/return-of-the-mobile-stylesheet/ kennst du?

Qapla'

[Auge]

Hallo

Hmmm, nein, in meinem Fall eigentlich nicht, Probleme sehe ich nun eher bei der PHP-Loesung, ...

Naja, ob du dem Benutzer nun mit PHP eventuell das vorsetzt, was er nicht haben wollen könnte, oder mit CSS, bleibt sich gleich. Er wird die Vorgaben des Browsers benutzen oder eigene Vorgaben gemacht haben. Also her mit dem "handheld"-Stylesheet udn gut ist's.

Was dein Logo betrifft, kommt mir noch eine idee, die ich leider nicht mit einem Link unterlegen kann.

Für Überschriften, die einen Schickimickischriftzug zeigen sollen, gibt es einige Lösungen, die darauf hinauslaufen, den Schriftzug als CSS-Hintergrundbild innerhalb der Überschrift anzuzeigen und den dazugehörigen Text in ein <span> reinzupacken, das aus dem Bildschirmbereich herauspositioniert wird. Das ist, wenn ich nicht irre, analog zu deinem Problem. Wenn du das Replacement und wegschieben auf media="screen" beschränkst, wird in allen anderen Medien der Text angezeigt, nur auf dem Monitor eines Gerätes, dessen Browser den Mediaquery anwendet, wird alternativ dazu das Bild angezeigt.

<h1><span>Logoersatztext</span></h1>

Nach den verschiedenen CSS-Lösungen musst du mal googeln, da habe ich, wie gesagt, keinen Link parat. "Image Replacement" sollte ein zielführender Suchbegriff sein.

Tschö, Auge

[Bademeister]

Hi

Was dein Logo betrifft, kommt mir noch eine idee, die ich leider nicht mit einem Link unterlegen kann.
[...]
"Image Replacement" sollte ein zielführender Suchbegriff sein.

Ja, das hat bleicher mir schon verlinkt und ich habe es zunaechst schnoede von mir gewiesen, weil ich eigentlich mit der Tatsache ganz gluecklich bin, dass sie Icons HTML-Inhalt sind.

Und es sind recht viele, von denen immer verschiedene auf den jeweiligen Seiten zu sehen sind. Ich muesste dann die vielen Icons per Inline-Styles als Hintergrundbilder einbinden oder jedem Element eine iconbezogene ID geben und jeder ID einzeln extern das Hintergrundbild zuweisen. Und dann im Handheld-Stylesheet mit !important alle Hintergrundbilder wieder unterbinden.
Finde ich alles nicht so huebsch, aber es waere im Ergebnis eine konsequente CSS-Loesung, und das ist ja das, was ich wollte.

Mal sehen. Danke bleicher und Dir jedenfalls fuer die Tipps.

@Gunnar:

http://www.alistapart.com/articles/return-of-the-mobile-stylesheet/ kennst du?

Kannte ich nicht. Da steht nach erstem Ueberfliegen auch kein Koenigsweg fuer mein Thema hier beschrieben, aber ich hab noch nicht viel gelesen. Jedenfalls interessant, ich werd dann mal noch ein wenig schmoekern, wenn ich Zeit hab. Danke.

viele Gruesse an alle,
der Bademeister

[bleicher]

Grüße,

beim "Image Replacement" hier wird aber Text durch ein Bild "ersetzt". Das suche ich nicht, ist quasi die falsche Richtung.

es geht um den ansatz - setz deine bilder als hintergrundbilder der elemente - und vergib die einfach nicht für mobile
MFG
bleicher