Previous Thread
Next Thread
Print Thread
Rate Thread
Correct handling of alpha layers in PNG files with IE #19497
11/29/05 08:28 PM
11/29/05 08:28 PM
Joined: Dec 2002
Posts: 3,255
Likes: 3
Maryland
§intå× Offline OP
UGN Elite
§intå×  Offline OP
UGN Elite

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);
  

Re: Correct handling of alpha layers in PNG files with IE #19498
11/29/05 09:35 PM
11/29/05 09:35 PM
Joined: Feb 2002
Posts: 7,203
Likes: 11
Portland, OR; USA
Gremelin Offline

Community Owner
Gremelin  Offline

Community Owner

Joined: Feb 2002
Posts: 7,203
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
Re: Correct handling of alpha layers in PNG files with IE #19499
12/13/05 07:40 PM
12/13/05 07:40 PM
Joined: Aug 2003
Posts: 11
Saint Johns, PA
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);
  

Re: Correct handling of alpha layers in PNG files with IE #19500
12/13/05 11:41 PM
12/13/05 11:41 PM
Joined: Feb 2002
Posts: 7,203
Likes: 11
Portland, OR; USA
Gremelin Offline

Community Owner
Gremelin  Offline

Community Owner

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


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

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


Member Spotlight
Gremelin
Gremelin
Portland, OR; USA
Posts: 7,203
Joined: February 2002
Show All Member Profiles 
Forum Statistics
Forums41
Topics33,680
Posts68,696
Average Daily Posts0
Members2,171
Most Online1,567
Apr 25th, 2010
Latest Postings
Blackbeard.....
by Gremelin. 10/03/18 07:02 PM
my old account still exists!
by Crime. 08/10/18 02:47 PM
Top Posters(All Time)
UGN Security 41,392
Gremelin 7,203
§intå× 3,255
SilentRage 1,273
Ice 1,146
pergesu 1,136
Infinite 1,041
jonconley 955
Girlie 908
unreal 860
Top Liked Users (All Time)
§intå× Likes: 3
Black Beard Likes: 1
Cold Sunn Likes: 1
Crime Likes: 1
Cyrez Likes: 1
Dartur Likes: 1
fleshwound Likes: 1
Ghost Likes: 2
Girlie Likes: 1
Gremelin Likes: 14
Powered by UBB.threads™ PHP Forum Software 7.7.0