nicht angemeldet
Alpha-Image-Loader / PNG-Datein
Hallo Forum,
ich verwende Halbtransparente Grafiken für meine Webseite.
Halbtransparente Grafiken lassen sich nur mit dem PNG-Format im Web realisieren. Um dieses Darstellen zu können, muss man im IE einen Filter verwenden(wenn dem nicht so sein sollte, lass ich mich auch gern eines Besseren belehren!):
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bild.png', sizingMethod='scale')
User die jetzt allerdings nicht den IE verwenden, können diese Grafik nicht sehen. In allen anderen Browsern lässt sich die Grafik auch ohne weiteres im img-Tag darstellen. Meine Lösung war bisher mit Javascript eine Browserweiche zu definieren, und je nach dem ob der User nun IE nutzt oder nicht, wird der AlphaImageLoader von Microschrott geladen.
Kann man das nicht besser machen, sprich ohne Javascript?
Wahrscheinlich keine PNG-Grafiken verwenden, dass soll aber nicht Sinn das Sache sein.
Gruß
Torsten
-
Hallo Torsten,
Ich habe mich gerade durch dasselbe Problem durchgegoogelt, hier meine Loesung:
HTML-Datei
<div id="heading"><img src="pics/shim.gif" width="400" height="52" alt="test" /></div> shim ist ein 1px transparentes gifCSS-Datei
Erst der div-Container mit den Eigenschaften, die fuer alle Browser gelten sollen
#heading{
position:absolute;
right:50px;
top:15px;
z-index:20;
background-repeat: no-repeat;
background-position: top right;
}Dann das png fuer Gecko und Opera (IE kann body>#heading nicht)
body>#heading {
background-image: url(../pics/headings/test.png);
}Und schliesslich das png fuer den IE (nur IE kann * html #heading)
* html #heading {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pics/headings/test.png');
}Zu beachten ist, dass bei der IE-Variante der Pfad zum Bild relativ zur HTML-Datei stehen muss, nicht zum Stylesheet.
Gruß,
Dieter
-
Hallo Dieter,
den 1px Transparent-Trick hab ich früher auch verwendet.
Mit PNG und echter Halbtransparenz sieht das einfach viel besser aus und sieht vorallem auch auf TFT-Displays nicht so pixelisch wie mit dem 1px/GIF-Trick aus.Gruß
Torsten -
hi Dieter,
hmm, also bei mir geht das weder im IE noch im Mozilla
Gruß
Torsten-
Ich bin ja auch en depp!!!
Doch es geht, es geht sogar wunderbar,
vielen Dank Dieter!Gruß
Torsten-
Hallo Torsten.
Doch es geht, es geht sogar wunderbar,
Bei mir nicht... Bei mir verschwindet alles inkl. dem selektierten Element...
Gruß, Ashura
--
Selfcode: sh:( fo:| ch:? rl:? br:^ n4:& ie:% mo:| va:) de:[ zu:| fl:( ss:{ ls:# js:|
> Bitte gebt euren Themen sinnvolle Namen, sodass sie später im Archiv leichter gefunden werden können. <-
Hallo Ashura,
ich habs so gemacht:
#// Browserweiche mittels CSS-Hacks
#body> .logo { // für Netscape und Co
# width:120px;
# height:120px;
# background-image:url(bild.png);
#}
#* html .logo { // Für IE
#width:120px;
#height:120px;
#filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bild.png', #sizingMethod='scale');
#}Gruß
Torsten-
Hallo Torsten.
Ich hatte vor dem Unterordner-Pfad das "/" vergessen...
Der Inhalt wird zwar nun wieder angezeigt, aber das PNG wird IE-typisch volltransparent angezeigt...
Ich weiß nicht, ob ich mich zu dumm anstelle, aber irgendwie scheint der Filter nicht aktiv zu werden...
Gruß, Ashura
--
Selfcode: sh:( fo:| ch:? rl:? br:^ n4:& ie:% mo:| va:) de:[ zu:| fl:( ss:{ ls:# js:|
> Bitte gebt euren Themen sinnvolle Namen, sodass sie später im Archiv leichter gefunden werden können. <-
Hi,
poste doch mal dein Code.
Gruß
Torsten-
Hallo Torsten.
poste doch mal dein Code.
Gerne:
*.htm:
<link rel="stylesheet" href="css/default.css" media="screen, tv" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="css/ie.css" type="text/css" />
<![endif]-->ie.css:
#con{height:65%;padding:12% 5% 3% 23%;background:#000;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/bg_alpha.png', #sizingMethod='scale');}
Gruß, Ashura
--
Selfcode: sh:( fo:| ch:? rl:? br:^ n4:& ie:% mo:| va:) de:[ zu:| fl:( ss:{ ls:# js:|-
Hallo.
Anmerkung: Das "background:#000;" hatte ich momentan nur vorübergehend wieder eingesetzt, ohne ist der Hintergrund volltransparent
Gruß, Ashura
--
Selfcode: sh:( fo:| ch:? rl:? br:^ n4:& ie:% mo:| va:) de:[ zu:| fl:( ss:{ ls:# js:| -
Hi,
du brauchst gar nicht 2 verschiedene CSS-Dateien einzubinden!
mach es so wie ich, in einer CSS-Datei.
Allerdings solltest du die # weg machen!
Diesen <!--[if IE]> Kram, brauchst du nicht.Gruß
-
Hallo Torsten.
du brauchst gar nicht 2 verschiedene CSS-Dateien einzubinden!
Ich danke dir für den Hinweis mit dem "* html", das erspart mir in der Tat eine CSS Datei.
Allerdings solltest du die # weg machen!
Ich bin hin und wieder ein wenig schusselig, aber nicht dumm. ;)
Diesen <!--[if IE]> Kram, brauchst du nicht.
Doch, für eine IE-eigene *.js Datei.
Aber dennoch wird die *.png volltransparent dargestellt.
Ich habe es nun wie folgt in der default.css eingebunden:
* html #con{height:65%;padding:12% 5% 3% 23%;/*background:#000;*/filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/bg_alpha.png', #sizingMethod='scale');}
Gruß, Ashura
--
Selfcode: sh:( fo:| ch:? rl:? br:^ n4:& ie:% mo:| va:) de:[ zu:| fl:( ss:{ ls:# js:|-
hi,
* html #con{height:65%;padding:12% 5% 3% 23%;/*background:#000;*/filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/bg_alpha.png', #sizingMethod='scale');}
is die # vor sizingMethod='... gewollt? die darf da nicht hin!
Ansonsten weis ich leider auch nicht woran es liegen könnte.-
Hallo Torsten.
is die # vor sizingMethod='... gewollt? die darf da nicht hin!
Ich hatte sie von deinem CodeBeispiel übernommen:
#* html .logo { // Für IE
#width:120px;
#height:120px;
#filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bild.png', #sizingMethod='scale');
#}Aber auch nach der Entfernung zeigt sich keine Wirkung.
Ansonsten weis ich leider auch nicht woran es liegen könnte.
Naja, dennoch danke. Immerhin hast du mir eine ganze CSS Datei und eine Zeile Code in jeder einzelnen *.htm Datei erspart. Dankeschön.
Gruß, Ashura
--
Selfcode: sh:( fo:| ch:? rl:? br:^ n4:& ie:% mo:| va:) de:[ zu:| fl:( ss:{ ls:# js:|
-
-
Hi,
Ich danke dir für den Hinweis mit dem "* html", das erspart mir in der Tat eine CSS Datei.
nur wenn Dir Validität nicht wichtig ist.
Erfahrungsgemäß kommen mit der Zeit noch mehr IE-Definitionen dazu, so daß sich eine extra Datei schon lohnen kann.freundliche Grüße
Ingo-
Hallo Ingo Turski.
nur wenn Dir Validität nicht wichtig ist.
Das ist sie mir aber durchaus. Ich werde sehen, inwiefern ich da noch etwas abändern muss.
Erfahrungsgemäß kommen mit der Zeit noch mehr IE-Definitionen dazu, so daß sich eine extra Datei schon lohnen kann.
Die zusätzlichen, bzw. ersetzenden IE-Definitionen entsprechen ca. 10 Zeilen...
Gruß, Ashura
--
Selfcode: sh:( fo:| ch:? rl:? br:^ n4:& ie:% mo:| va:) de:[ zu:| fl:( ss:{ ls:# js:|-
Hi,
nur wenn Dir Validität nicht wichtig ist.
Das ist sie mir aber durchaus. Ich werde sehen, inwiefern ich da noch etwas abändern muss.
das ist schnell gemacht ;-)
freundliche Grüße
Ingo-
Hallo Ingo Turski.
das ist schnell gemacht ;-)
Auch ich habe mein neues CSS einmal durch den lokalen Validator gejagt und möchte der Datenbank diese nahezu endlose Zeichenkette ersparen... ;)
Seltsamerweise hat der CSS-Validator nicht das gesamte CSS validiert, vermutlich wegen der URI-Längenbegrenzung...
Ich verzichte auf den Filter, nutze aber ab jetzt dennoch 1 CSS für alle Browser mit den von Torsten genannten "Maskierungen".
Gruß, Ashura
--
Selfcode: sh:( fo:| ch:? rl:? br:^ n4:& ie:% mo:| va:) de:[ zu:| fl:( ss:{ ls:# js:|-
Hallo.
Seltsamerweise hat der CSS-Validator nicht das gesamte CSS validiert, vermutlich wegen der URI-Längenbegrenzung...
Ich Schussel, das CSS wurde natürlich komplett validiert...
Gruß, Ashura
--
Selfcode: sh:( fo:| ch:? rl:? br:^ n4:& ie:% mo:| va:) de:[ zu:| fl:( ss:{ ls:# js:| -
Hi,
Hallo Ingo Turski.
das ist schnell gemacht ;-)
Auch ich habe mein neues CSS einmal durch den lokalen Validator gejagt und möchte der Datenbank diese nahezu endlose Zeichenkette ersparen... ;)
Nunja, ich war ja auch fies und hatte den Javascript-Kommentar mit validieren lassen.
Ohne sieht's aber auch nicht viel besser aus.freundliche Grüße
Ingo-
Hallo Ingo Turski.
Ohne sieht's aber auch nicht viel besser aus.
Das finde ich aber nun doch etwas seltsam:
Und es ist valide... (?)
Gruß, Ashura
--
Selfcode: sh:( fo:| ch:? rl:? br:^ n4:& ie:% mo:| va:) de:[ zu:| fl:( ss:{ ls:# js:|-
Hi,
Ohne sieht's aber auch nicht viel besser aus.
Das finde ich aber nun doch etwas seltsam:
Und es ist valide... (?)
Du verwendest ja auch keine ungültige Eigenschaft.
freundliche Grüße
Ingo-
Hallo Ingo Turski.
Du verwendest ja auch keine ungültige Eigenschaft.
Also wäre es nur bei dem Einsatz eines Filters nicht valide (invalide?).
Danke für die Information.
Gruß, Ashura
--
Selfcode: sh:( fo:| ch:? rl:? br:^ n4:& ie:% mo:| va:) de:[ zu:| fl:( ss:{ ls:# js:|
-
-
-
-
-
-
-
-
-
-
Hallo,
<!--[if IE]>
Hast du daran gedacht dass der IE 7 wohl diese ganzen sachen von alleine machen können wird? Also PNG Transparenz max-width und so weiter. Ich mache das immer so dass ich diese Hack Dateien nur für IE lte 6 einbinde.
Grüße
Jeena Paradies-
Hallo Jeena Paradies.
Hast du daran gedacht dass der IE 7 wohl diese ganzen sachen von alleine machen können wird?
Es wird wahrscheinlich noch bis Windows Blackcomb dauern, bis ein IE 7.0 erscheint, da sogar bei Windows Longhorn erst ein IE 6.05 enthalten ist.
Ich mache das immer so dass ich diese Hack Dateien nur für IE lte 6 einbinde.
Ich hatte es zuvor ebenso, jedoch habe ich mir diese Zeichen erspart, da es wie gesagt noch sehr lange dauern wird, bis ein IE erscheint, der ansatzweise die Fähigkeiten der Geckos hat.
Gruß, Ashura
--
Selfcode: sh:( fo:| ch:? rl:? br:^ n4:& ie:% mo:| va:) de:[ zu:| fl:( ss:{ ls:# js:|-
Hallo,
Ich hatte es zuvor ebenso, jedoch habe ich mir diese Zeichen erspart, da es wie gesagt noch sehr lange dauern wird, bis ein IE erscheint, der ansatzweise die Fähigkeiten der Geckos hat.
Ich weiß ja nicht wie viele Seiten du so gemacht hast und betreuen darfst aber ich wüsste nicht wo ich das überall schon eingesetzt habe und wo die Seiten dann warscheinlich Probleme haben werden und ich dann wieder ran muss, aber so kann man Kunden auch zum wiederkommen bewegen ;-)
Grüße
Jeena Paradies-
Hallo Jeena Paradies.
(...), aber so kann man Kunden auch zum wiederkommen bewegen ;-)
Deine Geschäftspraktiken werde ich mir merken... ;)
Gruß, Ashura
--
Selfcode: sh:( fo:| ch:? rl:? br:^ n4:& ie:% mo:| va:) de:[ zu:| fl:( ss:{ ls:# js:|
-
-
-
-
-
-
-
-
-
-
-
-
Hi,
Kann man das nicht besser machen, sprich ohne Javascript?
Abgesehen davon, daß ein conditional comment für dieses invalide "CSS" die beste Lösung wäre: Dir ist klar, daß der Filter ActiveX voraussetzt, was noch häufiger als Javascript im IE deaktiviert sein dürfte?
freundliche Grüße
Ingo-
Hi Ingo,
Kann man das nicht besser machen, sprich ohne Javascript?
Abgesehen davon, daß ein conditional comment für dieses invalide "CSS" die beste Lösung wäre: Dir ist klar, daß der Filter ActiveX voraussetzt, was noch häufiger als Javascript im IE deaktiviert sein dürfte?mein IE läuft bei mir immer ohne ActiveX (es sein denn ich ziehe Windows-Updates), der Filder funktioniert bei mir auch ohne ActiveX! Ich werde das mal bei anderen Beobachten.
Gruß
Torsten-
Hi,
mein IE läuft bei mir immer ohne ActiveX (es sein denn ich ziehe Windows-Updates), der Filder funktioniert bei mir auch ohne ActiveX! Ich werde das mal bei anderen Beobachten.
kann sein, daß sich das mit dem SP2 geändert hat.
freundliche Grüße
Ingo
-
-
