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
December
Su M Tu W Th F Sa
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 30 31
Our Sponsors


Latest Postings
My friend NEEDS your HELP!
by Gizmo
11/26/08 12:21 AM
Useful PHP Functions & Code
by Gizmo
11/13/08 09:25 PM
UBBCode Tags
by Gizmo
11/13/08 09:25 PM
Topic Options
Rate This Topic
#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: 3252
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

Sponsor Advertisements help keep UGN Security Online.



Support UGN Security by Purchasing our Sponsors Products.
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: 6958
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: 6958
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: 3252
Loc: here
Ian thanks for the break down.
_________________________
My New site OpenEyes

Top



Moderator:  §intå×, Gizmo 
Featured Member
Registered: 03/03/02
Posts: 23
Forum Stats
6889 Members
44 Forums
11030 Topics
45809 Posts

Max Online: 677 @ 06/30/07 10:06 PM
Top Posters
Gizmo 6958
UGN Security 4080
§intå× 3252
IceMyst 1449
SilentRage 1273
Ice 1146
pergesu 1134
Infinite 1039
jonconley 954
Girlie 903
Newest Members
lucky vin, prEttyNDistress, AndrewKlilly, border, f4k3m3
6889 Registered Users
Who's Online
0 registered (), 6 Guests and 7 Spiders online.
Key: Admin, Global Mod, Mod
Latest News
Update Humpday - Sept 26, 2008
by Gizmo
11/28/08 03:39 AM
Happy Holidays!
by Gizmo
11/27/08 09:09 AM
New Mailing
by Gizmo
11/24/08 01:30 PM
A special update...
by Gizmo
11/24/08 01:10 PM
Required Reading Update...
by Gizmo
11/07/08 11:36 AM


Donate
  Get Firefox!
Get FireFox!