UGN Security Forums
My ProfileMember DirectoryLogin
Search our ForumsView our FAQView our Site Rules
View our CalendarView our Active TopicsGo to our Main Page

UGN Security Store
 

Network Sites UGN Security, Elite Web Gamers, Back of the Web, EveryDay Helper, VNC Web Design & Development
Our Sponsors

Latest Postings
I want to upgrade my phone
by Gizmo
Today at 12:09 AM
What is the point of this?
by wangjiahua
Yesterday at 08:41 AM
My TV...
by Gizmo
10/05/08 08:14 PM
Wifi
by Unbro9
10/05/08 07:43 PM
my old account still exists!
by ?
09/17/08 01:17 AM
Topic Options
#19497 - 11/29/05 10:28 PM Correct handling of alpha layers in PNG files with IE
§intå× Administrator Offline
UGN Elite
*****

Registered: 12/03/02
Posts: 3250
Loc: here
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
Our Sponsors
Sponsor Our Sponsors

Top  
#19498 - 11/29/05 11:35 PM Re: Correct handling of alpha layers in PNG files with IE
Gizmo Administrator Offline
Community Owner
*****

Registered: 02/28/02
Posts: 6944
Loc: 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, Elite Web Gamers & VNC Web Design Owner

Top
#19499 - 12/13/05 09:40 PM Re: Correct handling of alpha layers in PNG files with IE
Ian Spence Offline
Junior Member

Registered: 08/27/03
Posts: 11
Loc: 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 01:41 AM Re: Correct handling of alpha layers in PNG files with IE
Gizmo Administrator Offline
Community Owner
*****

Registered: 02/28/02
Posts: 6944
Loc: Portland, OR; USA
See, told you he'd know
_________________________
Donate to UGN Security here.
UGN Security, Elite Web Gamers & VNC Web Design Owner

Top
#19501 - 12/14/05 09:15 AM Re: Correct handling of alpha layers in PNG files with IE
§intå× Administrator Offline
UGN Elite
*****

Registered: 12/03/02
Posts: 3250
Loc: here
Ian thanks for the break down.
_________________________
My New site OpenEyes

Top



Moderator:  §intå×, Gizmo 
Forum Stats
6878 Members
44 Forums
10798 Topics
45566 Posts

Max Online: 677 @ 06/30/07 10:06 PM
Top Posters
Gizmo 6944
UGN Security 3767
§intå× 3250
IceMyst 1449
SilentRage 1273
Ice 1146
pergesu 1134
Infinite 1039
jonconley 954
Girlie 903
Newest Members
kalyan, dutch, nitestryker, mutant_, thuan0
6877 Registered Users
Who's Online
0 Registered (), 6 Guests and 4 Spiders online.
Key: Admin, Global Mod, Mod
Latest News


Donate

Get the Google FireFox Toolbar
Get Firefox!
Get FireFox!