Need help with PNG file on website when viewing with IE - Tilted Forum Project Discussion Community

ShaniFaye · 11-15-2005, 08:42 AM

Thanks to ngdawg she showed me how to take a file and make the background transparent by making it into a PNG file...unfortuantely it doesnt show up that way in IE.

I have researched and yes, I know this is a problem for IE versions under 7...my problem is for the life of me I cannot figure out how to add the "fix" code because I just dont understand it.

Is there anyone that can help me? Its just for ONE page, and for ONE image on that page.

spectre · 11-15-2005, 10:55 PM

I did a quick google and here's what I found.
You're going to want to copy and paste this part inside of your <head> </head> tags:

Code:

<!--[if gte IE 5.5000]>
   <script language="JavaScript"> var ie55up = true </script>
<![endif]-->
<script language="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>

And for the image itself:

Code:

<img src="your.png" height="15" width="21" onload="fixPNG(this)">

where your.png is your png file. And yes, you must include the height and width in the img tag.

ShaniFaye · 11-16-2005, 02:08 PM

I tried that and I couldnt get it to work....is there anything in that first bit I need to change? Thats the bit that was WAY confusing me

trache · 12-08-2005, 10:33 AM

ShaniFaye, don't forget that this fix simply won't work when people have JavaScript (or I guess scripting period in IE, I forget) disabled, period.

I think the new Firefox allows you to turn JavaScript on and off for certain domains, but I'm not sure about Internet Explorer <= 6.

11-15-2005, 08:42 AM	#1 (permalink)
ShaniFaye Submit to me, you know you want to Location: Lilburn, Ga	Need help with PNG file on website when viewing with IE Thanks to ngdawg she showed me how to take a file and make the background transparent by making it into a PNG file...unfortuantely it doesnt show up that way in IE. I have researched and yes, I know this is a problem for IE versions under 7...my problem is for the life of me I cannot figure out how to add the "fix" code because I just dont understand it. Is there anyone that can help me? Its just for ONE page, and for ONE image on that page. __________________ *I want the diabetic plan that comes with rollover carbs. I dont like the unused one expiring at midnite!!*

11-16-2005, 02:08 PM	#3 (permalink)
ShaniFaye Submit to me, you know you want to Location: Lilburn, Ga	I tried that and I couldnt get it to work....is there anything in that first bit I need to change? Thats the bit that was WAY confusing me __________________ *I want the diabetic plan that comes with rollover carbs. I dont like the unused one expiring at midnite!!*

12-08-2005, 10:33 AM	#4 (permalink)
trache Insane	ShaniFaye, don't forget that this fix simply won't work when people have JavaScript (or I guess scripting period in IE, I forget) disabled, period. I think the new Firefox allows you to turn JavaScript on and off for certain domains, but I'm not sure about Internet Explorer <= 6. __________________ "You looked at me as if I was eating runny eggs in slow motion." - Gord Downie of The Tragically Hip