PNG-Graphiken mit Transparenz

Hi!

Habe eine Fragestellung, die zwar nicht direkt mit Menüs zu tun hat aber durchaus in Menüs die meiste Verwendung findet:

Heute wollte ausprobieren inwiefern man mit transparenten PNGs in Typo3 arbeiten kann und es funktioniert auch wunderbar und mit transparentBackground kann man sogar transparente Menüpunkte erstellen, was dem Gestalter noch ein gutes Stück Freiheit gibt.

Das Problem an der ganzen Geschichte: Internet Explorer natürlich (das Leben jedes Menschen, der irgendwie mit Internet zu tun hat, wäre ohne IE sehr viel leichter).
Die PNGs werden im Mozilla perfekt dargestellt aber im IE nur total schlecht und bröckelig. Mit der richtigen Verwendung der transparentBackground-Eigenschaft kriegt man zumindest auch im IE saubere Schrift hin aber eben keine sehr filigranen Graphiken.

Um das ganze zu veranschaulichen habe ich ein Beispielmenü vorbereitet:

http://www.pulse-art.de/typo3/

Im IE werden nur die Pixel des PNGs dargestellt die eine Deckkraft von 100% haben.

Weiss jemand eine Lösung dafür solche Graphiken zu verwenden ohne, dass IE Hässlichkeit verbreitet?

Danke für eure Hilfe!

Hallo modstyle,

der IE unterstützt das PNG-Format nur mangelhaft.
Abhilfe gibt's durch entsprechende Scripts,
siehe z.B. hier : http://dean.edwards.name/IE7/notes/#PNG
Die IE7-Scripts bringen dem IE außerdem noch position:fixed bei und andere nette Sachen.

Könntest du im Gegenzug den Code für dein Menü posten ?
Ich war immer der Überzeugung,
transparente GMENU mit Hintergrundgrafik wären nicht möglich.
Offensichtlich gehts doch.

viele Grüße
jenses

Hey

Warum sollte das nicht gehen??

Steht extra in der im TSRef unter Guifbuilder.

MFG

Danke für deine Antwort ich werde mir das mal anschauen!

Wegen der Transparenz: Funktioniert anstandslos. Die erzeugten Texte werden ja sogar im IE halbwegs anständig dargestellt.
Also ich poste hier einmal den ganzen Code dafür:

temp.menu_1.1 = GMENU
temp.menu_1.1 {
NO {
wrap = |<br />
XY = 200,36
backColor = 211,208,191
transparentBackground = 1
10 = TEXT
10.text.field = title
10.fontFile = fileadmin/schriften/myriad.otf
10.fontSize = 16
10.fontColor = #000000
10.offset = 10,22
10.align = left
}
RO < .NO
RO {
10.fontColor = 255,194,0
20 = IMAGE
20.file = GIFBUILDER
20.file {
XY = 250,1
backColor = #000000
}
20.offset = 0,5

30 = IMAGE
30.file = GIFBUILDER
30.file {
XY = 250,1
backColor = #000000
}
30.offset = 0,30

40 = IMAGE
40.file = fileadmin/rollover.png
40.offset = 150,0

}
RO = 1

ACT < .RO
ACT = 1
}

Ist bei weitem nicht optimal geschrieben aber ich wollte das gestern nur schnell ausprobieren 😉.

Das wichtigste für die Menüpunkte ist:

backColor = 211,208,191
transparentBackground = 1

Es ist eigentlich nicht nötig eine Hintergrundfarbe zu definieren, aber man sollte dies dennoch tun, da beim erzeugen der PNGs einzelne Pixel vom Hintergrund übrig bleiben und wenn man eine Farbe nimmt, die im Hintergrundbild den größten Teil hat, fallen diese "Restpixel" gar nicht auf und die Menüpunkte sehen sauberer aus.
Außerdem noch: niceText deaktivieren! Sieht absolut schlecht aus mit niceText.

Die kleine filigrane Graphik ist lediglich ein PNG, dass ich zuvor in Photoshop erstellt habe.

40 = IMAGE
40.file = fileadmin/rollover.png
40.offset = 150,0

Hoffe, dass hilft dir/euch weiter!

So und jetzt ab zur Arbeit 😉.

Hi nochmal!

Wie kann ich ein JavaScript in meinen Templates einbinden?

Wenn ich das ganz normal in der HTML-Vorlage einbinde, wird das doch durch Typo3 entfernt oder nicht?!!?

Danke für die Hilfe!

backColor = 211,208,191
transparentColor = 211,208,191
transparentBackground = 1

Ich glaub das ist genug Post oder?^^ Ich erinner mich dunkel daran das mir transparentColor mal zu hilfe gekommen ist, knapp bevor ich meinen rechner aus dem Fenster geworfen habe #paralyzed#

Hi!

Sicherlich ist das genug Post aber damit keine Missverständnisse entstehen und auch Anfänger was damit anfangen können, wollte ich den ganzen Menüpart posten.

transparentColor kann man angeben bzw. sollte man sogar, da es aber bei mir auch ohne Angabe der transparentColor funktionierte habe ich davon abgesehen.

Vielleicht eine Idee oder Ahnung wegen dem JavaScript?

NACHTRAG:

Habe das Javascript nun eingebunden und es steht auch im Quellcode drin (http://www.pulse-art.de/typo3), leider ändert dies jedoch nichts an der PNG-Darstellung im IE.

Hab ich was falsch gemacht?

Du mußt dies hier in den HEAD-Bereich setzen :

<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src="/ie7/ ie7-png.js" type="text/javascript">
</script>
<![endif]-->

Das JS ( ie7-png.js ) muß im entsprechenden Ordner liegen.
Wenn also Browser IE kleiner Version 7 ,
(der dann hoffentlich mit transparenten PNGs klar kommt)
dann Script ausführen.
Das Script gibts bei Dean Edwards zum Download.

jenses

Hi!

Danke für die Antwort! Habe heute ein anderes Script gefunden, dass den gleichen Zweck erfüllen soll und ebenfalls über eine externe Datei eingebunden.

Es funktioniert auch, aber leider nicht mit den von Typo3 erzeugten RollOvers.
Mit Photoshop habe ich ein PNG angelegt, dass Transparenz enthält und es sieht mit Hilfe des Skriptes auch im IE super aus!
Als ich das Script im Template integriert habe, hat das nur dazu geführt, dass die RollOvers gar nicht mehr funktionierten und man bei dem Schriftzug der Menüpunkte nur dann den Menüpunkt anklicken kann im IE, wenn man genau über einem der nichttransparenten Pixel ist.

Wenn einer eine Idee dazu hat, wäre ich sehr froh darüber, dieses Problem quält mich jetzt schon seit Tagen!

NACHTRAG:

Hab gerade das hier gefunden:

"I experienced that dynamicly loaded images from javascript are not yet affected from the png-fix"

Also wird das wohl doch nichts so wie es aussieht ...