Problema dels PNG transparents amb IE

Reading time: 2 – 2 minutes

Continuant amb el tema de les transparències i els .png, doncs resulta que el títol del portal que abans era un .gif ara és un .png, igualment amb la transparència necessaria perquè es vegi el color de fons de la pàgina. El que passa és que aquest .png ja no es veu bé amb IE, com sempre per raons incomprensibles de M$. Així doncs el Law, creador de la imatge del títol, m’ha passat un petit javascript que soluciona el problema.

Primer de tot el que hem de modificar és on es crida la imatge, per exemple:

<img src="path/imatge_transparent.png" onLoad="fixPNG(this)"  />

La funció fixPNG concretament té aquest codi JavaScript:

function fixPNG(myImage){
	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
}

Si no volem deixar aquest codi enmig del codi HTML/xHTML, podem guardar aquesta funció, per exemple, en el fitxer titol.js i després incrustar-la al meta-codi així:

<script type='text/javascript' src='path/titol.js'></script>

Moltes gràcies, LAW!