Your browser does not seem to support CSS. If images appear below, please disregard them.
It appears that you're running an Ad-Blocker. This site is monetized by Advertising and by User Donations; we ask that if you find this site helpful that you whitelist us in your Ad-Blocker, or make a Donation to help aid in operating costs.
Previous Thread
Next Thread
Print Thread
Rate This Thread
#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
Likes: 1
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
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
Likes: 3
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
#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);
  

#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
Likes: 3
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
#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
Likes: 1
Maryland
Ian thanks for the break down.


My New site OpenEyes
Sponsored Links

Member Spotlight
Gremelin
Gremelin
Portland, OR; USA
Posts: 7,195
Joined: February 2002
Show All Member Profiles 
Forum Statistics
Forums45
Topics46,786
Posts81,956
Average Daily Posts11
Members2,159
Most Online1,567
Apr 25th, 2010
Latest Postings
Top Posters(All Time)
UGN Security 39,950
Gremelin 7,195
§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: 1
Cold Sunn Likes: 1
Crime Likes: 1
Cyrez Likes: 1
Ghost Likes: 1
Gremelin Likes: 4
Ice Likes: 1
unreal Likes: 1
Top Liked Users (30 Days)
Powered by UBB.threads™ PHP Forum Software 7.6.0
(Snapshot build 20160902)