Hallo Typo3 Gemeinde!
Ich habe eine Typo3 Designvorlage in XHTML erstellt, in das ich ein transparentes PNG
<img src="images/trans.png" onload="fixPNG(this)" alt="" />
integriert habe. Zusätzlich habe ich im Header folgendes JS-Schnipsel eingefügt:
<!--[if gte IE 5.5000]>
<script language="JavaScript"> var ie55up = true </script>
<![endif]-->
<script language="JavaScript" type="text/javascript">
<!--
function fixPNG(myImage) // correctly handle PNG transparency in Win IE 5.5 or higher.
{
if (window.ie55up)
{
var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""
var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""
var imgTitle = (myImage.title) ? "title='" + myImage.title + "' " : "title='" + myImage.alt + "' "
var imgStyle = "display:inline-block;" + myImage.style.cssText
var strNewHTML = "<span " + imgID + imgClass + imgTitle
strNewHTML += " style=\"" + "width:" + myImage.width + "px; height:" + myImage.height + "px;" + imgStyle + ";"
strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
strNewHTML += "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>"
myImage.outerHTML = strNewHTML
}
}
//-->
</script>
Mittels dieses JavaScripts schafft es sogar der vollkommen inkompetente Internet Explorer (6) PNG Grafiken transparent darzustellen - allerdings nur, wenn ich mir die HTML Vorlage im Browser anschaue! Sobald ich das HTML-Template in Typo3 integriere, wird das PNG im Internet Explorer nicht mehr transparent dargestellt.
Ein Blick auf das JavaScript verriet mir den Grund. Typo3 scheint das JS zu modifizieren. Letztendlich wird folgender JS-Quellcode nach der Implementierung in Typo3 ausgegeben:
<script language="JavaScript" type="text/javascript">
<!--
function fixPNG(myImage) // correctly handle PNG transparency in Win IE 5.5 or higher.
{
if (window.ie55up)
{
var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""
var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""
var imgTitle = (myImage.title) ? "title='" + myImage.title + "' " : "title='" + myImage.alt + "' "
var imgStyle = "display:inline-block;" + myImage.style.cssText
var strNewHTML = "<span imgidimgclassimgtitlestrnewhtml="" style="\" width:="" myimagewidth="" pxheight:="" myimageheight="" px="" imgstyle="" strnewhtml="(src=\'" myimagesrc="" sizingmethodscale=""></span>"
myImage.outerHTML = strNewHTML
}
}
//-->
</script>
Von "filter:progid😃XImageTransform.Microsoft...."
ist nichts mehr zu sehen. Stattdessen findet man nur noch einen Codesalat á la "imgidimgclassimgtitlestrnewhtml" vor...
Kann mir jemand die Ursache erklären bzw. mir Lösungsvorschläge schildern?
Wäre nett! 😉
Wie hast du das Javascript in den Header eingebunden?
Übrigens gibt es eine Extension, um transparente PNG mit IE6 betrachten zu können, dazu benötigst du dann kein aufwändiges JS:
http://typo3.org/extensions/repository/view/tpg_iepngfix/4.0.0/
Hallo und erstmal Danke für die Info!
Dummerweise bringt mir die Extension nichts...
Innerhalb des TV-Templates befindet sich ein transparentes PNG, welches über einem anderen DIV-Element liegt. In dieses "andere" DIV-Element kann dann über Typo3 ein Bild geladen werden. D.h. das PNG überdeckt das von Typo3 geladene Bild teilweise.
Das JS habe ich:
- im Template gelassen und dann die Header-Parts über TemplaVoila aktiviert (der Code wurde - wie oben beschrieben - verfälscht)
- über TypoScript die Funktion "headerData" eingelesen (der Code wurde - wie oben beschrieben - verfälscht)
Hallo,
gib das js in eine externe datei, dann wird es nämlich nicht geparst, und via TS verweist du dann mittels page.headerData auf das js
georg
ENDLICH!!!!!!!!!
Danke! Das ihr mich wieder motiviert habt, es zu versuchen! ;-)
Folgender Weg ermöglicht es, transparente PNGs ins Template einzubinden.
Ins SETUP TypoScript habe ich folgende Zeilen hinzugefügt:
page.headerData.10 = TEXT
page.headerData.10.value (
<script defer type="text/javascript" src="fileadmin/templates/js/pngfix.js"></script>
)
In mein TemplaVoila-Template habe ich nun das PNG-Bild integriert:
<img border="0" src="images/panorama_window.png" alt="" />
Die Datei pngfix.js enthält folgende Zeilen:
/*
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
*/
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}