Your browser does not seem to support CSS. If images appear below, please disregard them.
Topic Options
Rate This Topic
#19497 - 11/30/05 03:28 AM Correct handling of alpha layers in PNG files with IE
Joined: Dec 2002
Posts: 3,255
§intå× Offline
§intå× Offline



Joined: Dec 2002
Posts: 3,255
Maryland
Okay, per Gizmo's advice I went in search of a javascript that forces IE to properly handle png graphics. As usual I found our sexy admin to be correct. There is a javascript that forces IE to handle the alpha layers of a PNG graphic correctly. Wow!!! This is really cool as up till now it was gif or nothing to hit the main stream. Below is the code. Can anyone explain it to me?

Code:
// Correctly handle PNG transparency in Win IE 5.5 or higher.
// http://homepage.ntlworld.com/bobosola. Updated 02-March-2004

function correctPNG() 
   {
   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
	     }
      }
   }
window.attachEvent("onload", correctPNG);
  


My New site OpenEyes
Top
Sponsored Links
#19498 - 11/30/05 04:35 AM Re: Correct handling of alpha layers in PNG files with IE
Joined: Feb 2002
Posts: 7,195
Gremelin Offline
Community Owner
Gremelin Offline

Community Owner

Joined: Feb 2002
Posts: 7,195
Portland, OR; USA
I may have known it exists but i'm not sure how to explain it, our good friend Ian Spence would be able to give you a hand me thinks... He's been toying with stuff like this forever...


Donate to UGN Security here.
UGN Security, Back of the Web, and VNC Web Services Owner
Top
#19499 - 12/14/05 02:40 AM Re: Correct handling of alpha layers in PNG files with IE
Joined: Aug 2003
Posts: 11
Ian Spence Offline
Junior Member
Ian Spence Offline
Junior Member

Joined: Aug 2003
Posts: 11
Saint Johns, PA
Code:
// Correctly handle PNG transparency in Win IE 5.5 or higher.
// http://homepage.ntlworld.com/bobosola. Updated 02-March-2004

function correctPNG() 
   {
   // Loop through all the images in a page
   for(var i=0; i<document.images.length; i++)
      {
      	  // img = the number i image of the page
	  var img = document.images[i]
	  
	  // imgname = uppercase version of url
	  var imgName = img.src.toUpperCase()
	  
	  // If url ends in PNG	  
	  if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
	     {
	         // If the image has an id, add it to the html we're creating
		 var imgID = (img.id) ? "id='" + img.id + "' " : ""
		 
		 // Same thing for class name
		 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
		 
		 // As well as title attribute
		 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
		 
		 // Make the img display correctly, transfer style attribute
		 var imgStyle = "display:inline-block;" + img.style.cssText 
		 
		 // If the image was aligned, float the div
		 if (img.align == "left") imgStyle = "float:left;" + imgStyle
		 if (img.align == "right") imgStyle = "float:right;" + imgStyle
		 
		 // If the image was inside a link, add the pointing cusor
		 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle	
		 
		 // Put together all the html with what we created	
		 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>" 
		 
		 // Add the html to the document
		 img.outerHTML = strNewHTML
		 
		 // Honestly, this confuses me
		 i = i-1
	     }
      }
   }
   
// Run this function as soon as the page loads
window.attachEvent("onload", correctPNG);
  

Top
#19500 - 12/14/05 06:41 AM Re: Correct handling of alpha layers in PNG files with IE
Joined: Feb 2002
Posts: 7,195
Gremelin Offline
Community Owner
Gremelin Offline

Community Owner

Joined: Feb 2002
Posts: 7,195
Portland, OR; USA
See, told you he'd know


Donate to UGN Security here.
UGN Security, Back of the Web, and VNC Web Services Owner
Top
#19501 - 12/14/05 02:15 PM Re: Correct handling of alpha layers in PNG files with IE
Joined: Dec 2002
Posts: 3,255
§intå× Offline
§intå× Offline



Joined: Dec 2002
Posts: 3,255
Maryland
Ian thanks for the break down.


My New site OpenEyes
Top

Member Spotlight
Crime

Crime
SC, usa
Posts: 506
Joined: March 2002
Show All Member Profiles 
Sponsored Links
Forum Statistics
Forums46
Topics46,477
Posts81,647
Members2,157
Most Online1,567
Apr 25th, 2010
Latest Postings
Top Posters(All Time)
UGN Security 39,641
Gremelin 7,195
§intå× 3,255
SilentRage 1,273
Ice 1,146
pergesu 1,136
Infinite 1,041
jonconley 955
Girlie 908
unreal 860