Your browser does not seem to support CSS. If images appear below, please disregard them.
toggle
February
S M T W T F S
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29
Sponsored Links
Latest Postings
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,194
Gremelin Offline
Community Owner
Gremelin Offline

Community Owner

Joined: Feb 2002
Posts: 7,194
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,194
Gremelin Offline
Community Owner
Gremelin Offline

Community Owner

Joined: Feb 2002
Posts: 7,194
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
Gremelin

Gremelin
Portland, OR; USA
Posts: 7,194
Joined: February 2002
Show All Member Profiles 
Forum Statistics
Forums46
Topics43,832
Posts79,006
Members2,157
Most Online1,567
Apr 25th, 2010
Top Posters(All Time)
UGN Security 36,995
Gremelin 7,194
§intå× 3,255
SilentRage 1,273
Ice 1,146
pergesu 1,136
Infinite 1,041
jonconley 955
Girlie 908
unreal 860
Newest Members
Herbert_Sherbert, codemauve, Lillysdragon1984, Brewwit, boa
2157 Registered Users
Who's Online Now
0 registered members (), 1 guest and 0 spiders.
Latest News