Gray - Filter und CSS

[Arne]

Hallo, ich möchte meine Bilder automatisch grau anzeigen lassen und dann bei Mouseover farbig. Gelöst habe ich dies (danke an die fleißige Tippgeberin) mittels CSS-Anweisung:

.bildgrau {FILTER: Gray()}
.bildfarb { }

und füge hinter dem img-Tag dann JEDEs Bild so ein:

<img class="bildgrau" ONMOUSEOVER="this.className = 'bildfarb'" ONMOUSEOUT="this.className = 'bildgrau'"; src="bild.jpg">

ABER: Kann man dies nicht gleich in der CSS lösen? Würde mir nun wirklich viel Arbeit ersparen. Danke, Arne+++

[Thomas Luethi]

Hallo,

.bildgrau {FILTER: Gray()}

Das ist invalides Zeugs, das nur im MS IE "funktioniert".
Frag mal den CSS-Validator, was er davon haelt:
http://jigsaw.w3.org/css-validator/

<img class="bildgrau" ONMOUSEOVER="this.className = 'bildfarb'" ONMOUSEOUT="this.className = 'bildgrau'"; src="bild.jpg">
ABER: Kann man dies nicht gleich in der CSS lösen?

Fuer anstaendige Browser (Geckos: Mozilla, Netscape ab 6/7)
koennte man es auch mit der :hover-Pseudoklasse loesen:
img.bildgrau { /* bla */ }
img.bildgrau:hover { /* fasel */ }
Aber mit denen werden dafuer Deine FILTER-Dingsbums nicht funktionieren.

Also, wenn Du schon unbedingt invaliden, proprietaeren Kram verwenden
willst, sollst Du Dich auch dafuer anstrengen muessen! ;-)

Ich wuerde es sein lassen.

Gruesse,

Thomas

[Arne]

Das ist invalides Zeugs, das nur im MS IE "funktioniert".

Das weiß ich, nehm es aber in Kauf. Ist ja nicht so, dass die anderen nichts sehen werden, sie sehen halt farbige Fotos, das ist nicht weiter schlimm.

Also, wenn Du schon unbedingt invaliden, proprietaeren Kram
verwenden willst, sollst Du Dich auch dafuer
anstrengen muessen! ;-)

Schon klar, deswegen habe ich ja auch hier gepostet ;-)

Arne+++

PS: Beispiel-Link unten.

[Thomas Luethi]

Hallo,

Die Filter-Effekte sind mir eigentlich egal. Ich surfe nie mit MS IE,
und es ist Deine Sache, wenn Du ungueltiges CSS verwenden willst.

PS: Beispiel-Link unten.

http://www.gueldendorf.de/beta/kirche/

Gerade bei dieser Seite finde ich solche Effekthascherei voellig ueberfluessig.
Und ich bezweifle, dass eine Mehrheit des Zielpublikums (ich rate mal: die
Einwohner von Gueldendorf) den Effekt toll findet. Ich vermute, die Leute
haetten mehr Freude, einfach die farbigen Fotos zu sehen.
Aber es ist Deine Seite...

Ich kann mir nicht verkneifen, noch ein paar weitere Anmerkungen
zu der Seite zu machen:

* Gib der Seite doch ein H1-Element. Siehe
   http://www.w3.org/2001/06tips/Use_h1_for_Title

* Die Zwischenueberschrift solltest Du statt mir
   <p><b>Aussenansicht</b>
   mit
   <h2>Aussenansicht</h2>
   auszeichnen.

Wenn ich einen Farbdrucker haette und die Seite mit MS IE ausdrucken
moechte, waere ich frustriert: Das rechte Bild wuerde abgeschnitten,
und die Fotos waeren nur schwarzweiss, obwohl es sie eigentlich in Farbe gibt.

* Dadurch, dass Du die beiden Fotos nebeneinander in eine Tabelle zwaengst,
   wird bei den meisten Browsern beim Drucken das rechte Bild abgeschnitten,
   und bei schmalem Browserfenster bzw. kleiner Aufloesung muss man horizontal
   scrollen, um beide Bilder zu sehen.
   Verwende lieber die CSS-Eigenschaft float:left (oder das HTML-Attribut align="left").
   Siehe http://www.tiptom.ch/tests/druck/tab_vs_float.html

* Fuege dem LINK-Tag, mit dem Du das externe Stylesheet einbindest,
   noch das Attribut  media="screen" hinzu.
   Dann wird das Stylesheet beim Drucken nicht angewendet, und die Bilder
   werden auch beim MS IE farbig ausgedruckt.
   Und wenn Du noch ein Title-Attribut ins LINK-Tag packst, koennen Mozilla-Benutzer
   das Stylesheet bequemer ausschalten ueber Menue View -> Use Style -> Basic Page Style.
   <link rel="stylesheet" type="text/css" href="../style.css" media="screen" title="Gueldendorf-Style">
   Wenn Du willst, kannst Du ja ein zweites Stylesheet schreiben,
   in dem Du die Filter weglaesst, und das auch sonst fuer den Druck optimiert ist
   (z.B. schwarze Schrift auf weiss, auch fuer Links, und diese nicht unterstreichen).
   Dieses kannst Du dann mit dem Attribut media="print" einbinden:
   <link rel="stylesheet" type="text/css" href="../druck.css" media="print" title="Druck-Style">
   Fuer weitere Infos, wie man verschiedene Medien (Screen, Print u.s.w.) behandelt, siehe:
   http://selfhtml.teamone.de/css/formate/einbinden.htm#link_media
   http://selfhtml.teamone.de/css/formate/einbinden.htm#media

Gruesse,

Thomas