text über <img src="…" /> (png transparent im IE = OK)

[west188]

hallo mal an alle,
ich bräuchte eure hilfe…

Ich möchte gerne über ein transparentes bild einen text schreiben können.

aber was ich eigentlich will steht auf meiner kleinen demosite:

http://www.free.pages.at/skyjumpy/demo/demo.html

zum download:
http://www.free.pages.at/skyjumpy/demo/demo.rar

währe natürlich  toll, wenn ihr mir da weiterhelfen könnt.
besten dank

mfg george

das transparent script hab ich von hier: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

[Ashura]

Hallo west188.

Ich möchte gerne über ein transparentes bild einen text schreiben können.

Tja, ich wüsste nicht, wie du das erreichen könntest. Darum empfehle ich:

• PNG für alle modernen Browser
• GIF mit filter:alpha für den IE

Ansonsten könntest du den Text auch gleich im Bild speichern.

Gruß, Ashura

[Jeena Paradies]

Hallo,

Tja, ich wüsste nicht, wie du das erreichen könntest. Darum empfehle ich:

Gegen geht es auf jeden fall, denn der IE7 von Dean Edwards kann das einwandfrei, habe es selbst ausprobiert. Vielleicht kann man auch nur die eine Komponente nutzen, die das <http://dean.edwards.name/IE7/src/?ie7-png.js@tiutle=png einbindet>.

Irgendwie geht es, wenn ihr wisst wie dann sagt bescheid, denn ich habe es selbst nicht hinbekommen.

Grüße
Jeena Paradies

[Ashura]

Hallo Jeena Paradies.

Irgendwie geht es, wenn ihr wisst wie dann sagt bescheid, denn ich habe es selbst nicht hinbekommen.

Ich habe es wie folgt gelöst:

• moderne Browser -> standard.css -> url(bild.png);
• IE -mittels Conditional Comments-> ie.css -> url(bild.gif); filter:alpha(opacity=XX);

Insofern funktioniert es für alle modernen Browser und zumindest den IE ab Version 5.5.

Gruß, Ashura

[Jeena Paradies]

Hallo,

• moderne Browser -> standard.css -> url(bild.png);
• IE -mittels Conditional Comments-> ie.css -> url(bild.gif); filter:alpha(opacity=XX);

Dann musst du ja aber immer ein extra gif Bild machen und hochladen. Außerdem macht filter:alpha ja alles durchsichtig, ich brauche aber meistens gewisse Bereiche die durchsichtig sind und andere nicht. Das geht zwar mit einem gif genau so, aber leicer sind die kanten so dermaßen pixelig, dass ich dann lieber auf das Bild ganz verzichte.

Insofern funktioniert es für alle modernen Browser und zumindest den IE ab Version 5.5.

Mit den oben genannten Einschränkungen.

Grüße
Jeena Paradies

[Ashura]

Hallo Jeena Paradies.

Dann musst du ja aber immer ein extra gif Bild machen und hochladen. Außerdem macht filter:alpha ja alles durchsichtig, ich brauche aber meistens gewisse Bereiche die durchsichtig sind und andere nicht.

Das stimmt allerdings. Ich "umgehe" das, indem ich die Intensität der Farben im IE-CSS verstärke.
Zudem ist mir aufgefallen, dass man manchen Elementen (z.B. <input>) mit alpha(opacity=100); wieder ihr ursprüngliches Aussehen verpassen kann. Es mag sein, dass es sich hierbei um einfache Vererbungs- und Überschreibregeln handelt, worauf CSS gründet. Aber weshalb kann dann _nicht jedem_ Element wieder die Transparenz entzogen werden..?

Das geht zwar mit einem gif genau so, aber leicer sind die kanten so dermaßen pixelig, dass ich dann lieber auf das Bild ganz verzichte.

Was meinst du?

Gruß, Ashura

[Jeena Paradies]

Hallo,

Das geht zwar mit einem gif genau so, aber leicer sind die kanten so dermaßen pixelig, dass ich dann lieber auf das Bild ganz verzichte.
Was meinst du?

Diesen Unterschied hier:

[1]                [2]

[1] 24bit mit Alphatransparenz IE Zeigt Bild nicht alphatransparent an sondern mit Hintergrundfarbe
[2] 8bit (genau das gleiche wie GIF) zeigt der IE transparent, doch dafür gibt es unheimlich viele häßliche Treppchen

Grüße
Jeena Paradies

[Ingo Turski]

Hi,

weißt Du eigentlich, daß man im IE Dein Bild u.U. gar nicht sieht?
Da ich den IE nur noch testweise einsetze, habe ich auch Javascript auf Eingabeaufforderung. Beim Laden passiert:
leere Seite - Script zulassen? (Nein)
Seitenaufbau ohne Bild - ActiveX zulassen (Nein)
Bild wird ohne transparenz angezeigt - Script zulassen (Nein)
Bild ist weg.

Ist Dir die Transparenz so wichtig, daß Du lieber auf das Bild verzichtest?

freundliche Grüße
Ingo

[Jeena Paradies]

Hallo,

weißt Du eigentlich, daß man im IE Dein Bild u.U. gar nicht sieht?
Da ich den IE nur noch testweise einsetze, habe ich auch Javascript auf Eingabeaufforderung. Beim Laden passiert:
leere Seite - Script zulassen? (Nein)
Seitenaufbau ohne Bild - ActiveX zulassen (Nein)
Bild wird ohne transparenz angezeigt - Script zulassen (Nein)
Bild ist weg.

Irgendwie kann ich das beim IE meines Vaters nicht so richtig austesten, denn dort wird 1) das Flash irgendwie falsch eingebunden, man sieht nur weiße Flächen, 2) die alphatransparenten Bilder werden kurz angezeigt und verschwinden gleich wieder.

Ich kann die herangehensweise hier nicht so richtig nachvollziehen. Ist es nicht einfach so dass das Bild bei eingeschaltetem JS und ActiveX durchsichtig angezeigt wird, bei ausgeschaltetem JS das Bild mit Hintergrundfarbe angezeigt wird, und bei eingeschaltetem JS und ausgeschaltetem ActiveX das Bild nicht angezeigt wird?

So wie du es oben beschrieben hast wird es bei ausgeschaltetem JS gar nicht angezeigt, stimmt das?

Ist Dir die Transparenz so wichtig, daß Du lieber auf das Bild verzichtest?

Ja, auf meiner eigenen Seite ja. Da sind die Bilder, die alphatransparenz unbedingt haben müssen nur ein kleiner Gimick und nur zur Unterhaltung. Wenn Es ein wichtiges Bild wäre, welches Inhalte vermittelt dann würde ich es natürlich ohne Transparenz anbieten, und dann aber warscheinlich auch einen weißen Hintergrund bieten.

Grüße
Jeena Paradies

[Ingo Turski]

Hi,

So wie du es oben beschrieben hast wird es bei ausgeschaltetem JS gar nicht angezeigt, stimmt das?

Wenn beides deaktiviert ist - Ja.
Duch die Eingabeaufforderungen wird aber die Interpretation des Quelltextes unterbrochen und man sieht das Bild kurzfristig mit Hintergrundfarbe. Ich habe jetzt nicht in den Quelltext gesehen, aber es könnte ein nachfolgend ausgeführtes CSS oder noscript sein.

freundliche Grüße
Ingo

[Jeena Paradies]

Hallo,

Wenn beides deaktiviert ist - Ja.

Das ist ja eigentlich sehr komisch. Das ganze funktioniert nämlich eigentlich so, dass das Bild ganz normal mit <img class="alpha" src="bild.png" alt="Bild" /> eingebunden wird.

Danach führt nur der IE die http://jeenaparadies.net/css/western/ielte6.css aus. Dort wiederum steht:

img.alpha { behavior: url("/css/western/pngbehavior.htc"); }

Und das bindet dann diese Datei ein: http://jeenaparadies.net/css/western/pngbehavior.htc

Diese Datei sollte dann eigentlich nach allen Bildern, die die klasse "alpha" haben suchen und diese dann mit einem durchsichtigen gif ersetzten. Danach soll dann im Hintergrund dieses GIF das PNG mittels des AlphaImageLoader vom IE halbdurchsichtig geladen werden. Wenn es der IE 5.0 ist dann wird er davor ausgeschlossen.

Ich dachte eigentlich dass bei ausgeschaltetem JS die pngbehavior.htc gar nicht geladen wird und alles beim alten bleibt, das bild also nicht verschwindet.

Grüße
Jeena Paradies

[Ingo Turski]

Hi,

Das ist ja eigentlich sehr komisch. Das ganze funktioniert nämlich eigentlich so, dass das Bild ganz normal mit <img class="alpha" src="bild.png" alt="Bild" /> eingebunden wird.

wie sieht die Klasse aus?

Danach führt nur der IE die http://jeenaparadies.net/css/western/ielte6.css aus. Dort wiederum steht:

img.alpha { behavior: url("/css/western/pngbehavior.htc"); }

Und das bindet dann diese Datei ein: http://jeenaparadies.net/css/western/pngbehavior.htc

nö. Hierzu wäre ActiveX und/oder ActiveScripting erforderlich.

freundliche Grüße
Ingo

[Jeena Paradies]

Hallo,

Das ist ja eigentlich sehr komisch. Das ganze funktioniert nämlich eigentlich so, dass das Bild ganz normal mit <img class="alpha" src="bild.png" alt="Bild" /> eingebunden wird.
wie sieht die Klasse aus?

Wie meinst du das? Die klasse wird im normalen CSS gar nicht erwähnt. Sie ist für den IE 5.0 da um einen kleinen Rand außenrumzuzeichnen und bei IE 5.5 und 6 ist sie nur für das pngbehavior.htc gedacht.

Und das bindet dann diese Datei ein: http://jeenaparadies.net/css/western/pngbehavior.htc
nö. Hierzu wäre ActiveX und/oder ActiveScripting erforderlich.

Wenn es also aus ist dann sollte einfach nichts passieren, und die pngs mit weißem Hintergrund angezeigt werden oder irre ich da?

Grüße
Jeena Paradies

[Ingo Turski]

Hi,

wie sieht die Klasse aus?
Wie meinst du das?

welche Eigenschaften dort definiert werden.

Die klasse wird im normalen CSS gar nicht erwähnt. Sie ist für den IE 5.0 da um einen kleinen Rand außenrumzuzeichnen und bei IE 5.5 und 6 ist sie nur für das pngbehavior.htc gedacht.

Und das erfordert zur Umsetzung Javascript (oder ActiveX?).

Wenn es also aus ist dann sollte einfach nichts passieren, und die pngs mit weißem Hintergrund angezeigt werden oder irre ich da?

Wie gesagt: es wurde gar kein Bild angezeigt bzw. das zuvor angezeigte Bild mit Hintergrundfarbe nach der zweiten Javascipt-Abfrage ausgeblendet.

freundliche Grüße
Ingo

[Ingo Turski]

Hi,

Insofern funktioniert es für alle modernen Browser und zumindest den IE ab Version 5.5.
Mit den oben genannten Einschränkungen.

und nur, wenn ActiveX zugelassen ist.

freundliche Grüße
Ingo

[MudGuard]

Hi,

aber was ich eigentlich will steht auf meiner kleinen demosite:
http://www.free.pages.at/skyjumpy/demo/demo.html

Mag sein, daß es da steht, aber das

zu entziffern, tu ich meinen Augen nicht an.

cu,
Andreas

[west188]

Mag sein, daß es da steht, aber das

zu entziffern, tu ich meinen Augen nicht an.

hoppla.., (na klar! kann ja nur der internet explorer mit png-files nichts anfangen)
im IE kann man das durchaus besser lesen :-)

also hier der text:

hi, also ich möchte, dass ich im obigen transparentem bild einen text hinein/darüber schreiben kann! Nur kann ich das bild nicht als "background-image" einfügen (so wie hier), da sonst das transparent script nicht mehr geht.

sorry, hab  nicht gedacht das da wer einen anderen Browser benutzt  :-)

[west188]

hier die IE ansicht:

mit allen anderen browsern gäbe es kein problem, nur mit dem ie halt..

[west188]

mit ebenen (Layer) ist das kein problem:

http://meinerosen.piranho.com/ebenen.html

funktioniert jetzt alles so wie ich es wollte!
mfg