VF DSL 468x60

Transparente PNG's in IE5/6 ohne JavaScript

Submitting your vote...
Rating: 3.9 of 5. 10 vote(s).
Click the rating bar to rate this item.

Manchmal besteht die Notwenigkeit, dass eine Site mit transparenten PNG's auch mit alten Internet Explorern (IE5 bzw IE6) funktioniert.

Die meisten Lösungen greifen hier auf JavaScript zurück. Man kann jedoch in TYPO3, direkt über TypoScript einen solchen PNG Fix für transparente PNG's erstellen.

Dieses Snippet zeigt wie es funktioniert.

 

# Das ist ein normales Bild, welches in guten Browsern angezeigt wird
lib.pngImage = COA
lib.pngImage {
  10 = IMAGE
  10.file = fileadmin/img/car.png
  10.file.import = uploads/tx_templavoila/
  10.file.import.field = field_image
  10.file.import.listNum = 0
  10.file.maxW = 600
}

# Falls es sich um einen Internet Explorer, mit einer Version kleiner als 7 handelt,
# ändern wir das lib.pngImage Objekt
[browser = msie] && [version= <7]
lib.pngImage = COA
lib.pngImage {
      # Als erstes füllen wir ein Dummy Register um das 
      #  TSFE:lastImgResourceInfo Array zu füllen
  20 = LOAD_REGISTER
      # Das Dummy Objekt ist nur eine Kopie des orginalen IMAGE
  20.dummy.cObject < .10
      # Wir ändern den Typ von IMAGE in IMG_RESOURCE
  20.dummy.cObject = IMG_RESOURCE
      # und löschen das orginale 10 Objekt
  10 >
      # Nun nutzen wir einen SPAN statt dem IMG Tag.
      # Der span verwendet den AlphaImageLoader Filter
      # um das transparente PNG im Internet Explorer richtig anzuzeigen.
  30 = TEXT
  30.value = <span style="width:{TSFE:lastImgResourceInfo|0}px;height:{TSFE:lastImgResourceInfo|1}px;display:inline-block;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='{TSFE:lastImgResourceInfo|3}', sizingMethod='scale');"></span>
  30.insertData = 1
}
[GLOBAL]
#Alles erledigt

 


Dieses Snippet wurde von Peter Klein eingesendet



Comments


Felix, 30-10-08 19:32:
Danke, super Sache das.

Kann man das irgendwie automatisch für alle Bilder die per ContentElement eingefügt werden aktivieren?

Grüße Felix
BastianBalthasarBux, 28-04-09 10:49:
@Felix: ja, man müsste nur die entsprechenden objekte in der css_styled_content überschreiben:

Generell:

Ich würde allerdings von übermässigem Gebrauch dieser Methode abraten. Die TYPO3-Conditions bzgl. useragent sind ja Serverseitig was die Performance der Webseite deutlich beeinträchtigen kann.
Außerdem spricht ja nichts gegen die Verwendung des entsprechenden JavaScripts. Hier gibt es einige sehr solide Lösungen, die man einfach onload aufrufen kann. (das javascript selbst lässt sich so ungefähr mit 10 schön formatierten Zeilen abhandeln, eine *ordentliche* Browser-Weiche in JavaScript vielleicht mit etwa 20 Zeilen).
Felix, 16-10-09 18:09:
Danke für die Antwort. Sehr informativ. Allerdings meine ich das der UA per JS ermittelt wird. Zumindest lässt das ein Blick in die generierte js Datei von T3 vermuten.

Denke ich teste beides. Die T3 Lösung und auch ein jQuery Plugin. Nochmal Danke für die Info.

Add comment

* - required field

*



*
*

Top 10 Updates

Erstellen eines einfachen Infocenters mit TYPO3  geändert am  17-Nov-2009 11:11:22
Funktionierendes Section Menu mit TemplaVoila geändert am  05-May-2009 10:42:40
"Nicht im Menü" in Sitemap anzeigen geändert am  05-May-2009 10:12:24
Implementation des DHTML Menüs von brainjar.com  geändert am  01-Feb-2009 13:01:36
Beispiel DHTML Menü geändert am  01-Feb-2009 12:47:38
Anzeigebeispiel für dynamische Bild Masken geändert am  16-Dec-2008 15:11:25
Links geändert am  11-Dec-2008 10:12:33
Nützliche Links geändert am  11-Dec-2008 10:05:56
Transparente PNG's in IE5/6 ohne JavaScript geändert am  04-Oct-2008 12:28:14
Typoscript Eigenschaften mit stdWrap erweitern geändert am  13-Jun-2008 14:16:12

Latest comments

10-Mar-2010 15:42:51
siteway.de schrieb: Perfekt. Nach genau sowas hab ich gesucht! Danke.
Jedem Mailformular Feld eine eigene CSS Klassen zuweißen
05-Mar-2010 10:15:12
andi schrieb: Und wie funktioniert das Ganze bei Seiten mit TemplaVoila?
Template abhängig von Spalteninhalt
28-Feb-2010 10:16:39
Dirk schrieb: Hello, this ts is awsome. very great! but is it possible to insert a 1px line before every...
4 Spalten Menu
English
Suche: