pnghandler-with JS to enable PNG map in IE transparent (including background map) _javascript skills

Png. JS Code:
pnghandler:object-oriented javascript-based PNG Wrapper
// --------------------------------------------------------
Version 1.1.20031218
Code by Scott schiller-www.schillmania.com
// --------------------------------------------------------
Description:
Provides gracefully-degrading PNG functionality where
PNG is supported natively or via filters (Damn, ie!)
Should work with PNGs as images and DIV background images.

function Pnghandler () {
var self = this;

This.na = Navigator.appName.toLowerCase ();
THIS.NV = Navigator.appVersion.toLowerCase ();
This.isie = this.na.indexOf (' Internet Explorer ') +1?1:0;
This.iswin = this.nv.indexOf (' windows ') +1?1:0;
This.ver = This.isie?parsefloat (This.nv.split (' msie ') [1]):p arsefloat (THIS.NV);
This.ismac = this.nv.indexOf (' mac ') +1?1:0;
This.isopera = (Navigator.userAgent.toLowerCase (). IndexOf (' opera ') +1 | | navigator.userAgent.toLowerCase (). IndexOf ( ' opera/') +1);
if (This.isopera) This.isie = false; Opera filter catch (which is sneaky, pretending to being IE by default)

This.transform = null;

This.getelementsbyclassname = function (classname,oparent) {
Doc = (oparent| | Document);
matches = [];
nodes = doc.all| | Doc.getelementsbytagname (' * ');
For (i=0 i<nodes.length; i++) {
if (nodes[i].classname = = ClassName | | nodes[i].classname.indexof (className) +1 | | nodes[i].classname.indexof ( classname+ ') +1 | | Nodes[i].classname.indexof (' +classname) +1) {
Matches[matches.length] = nodes[i];
}
}
return matches; Kids, don ' t play with fire. ;)
}

This.filtermethod = function (oold) {
IE 5.5+ Proprietary filter Garbage (boo!)
Create new element based on the old one. Doesn ' t seem to render properly otherwise (due to filter?)
Use proprietary the "Currentstyle" object, so rules inherited via CSS are picked up.

var o = document.createelement (' div '); Oold.nodename
var filterid = ' DXImageTransform.Microsoft.AlphaImageLoader ';
O.style.width = OOld.currentStyle.width;
O.style.height = OOld.currentStyle.height;

if (Oold.nodename = = ' DIV ') {
var B = oOld.currentStyle.backgroundImage.toString (); Parse out background image URL
OOld.style.backgroundImage = ' None ';
Parse out background image URL from Currentstyle object.
var i1 = b.indexof (' url (') +5;
var newsrc = b.substr (i1,b.length-i1-2). Replace ('. gif ', '. png '); Find instance of ') after (", chop from string
o = oold;
O.style.writingmode = ' LR-TB '; has to being applied so filter "has layout" and is displayed. Seriously. Refer to Http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp?frame=true
O.style.filter = "ProgID:" +filterid+ "(src= ' +newsrc+" ', sizingmethod= ' crop ') ";
Replace the old (existing) with the new (just created) element.
OOld.parentNode.replaceChild (O,oold);
else if (oold.nodename = ' IMG ') {
var newsrc = oold.getattribute (' src '). Replace ('. gif ', '. png ');
Apply Filter
OOLD.SRC = ' none.gif '; Get rid of image
OOld.style.filter = "ProgID:" +filterid+ "(src= ' +newsrc+" ', sizingmethod= ' crop ') ";
OOld.style.writingMode = ' LR-TB '; has to being applied so filter "has layout" and is displayed. Seriously. Refer to Http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp?frame=true
}
}

This.pngmethod = function (o) {
Native transparency Support. Easy to implement. (woo!)
Bgimage = This.getbackgroundimage (o);
if (bgimage) {
Set background image, replacing. gif
o.style.backgroundimage = ' url (' +bgimage.replace ('. gif ', '. png ') + ') ';
else if (o.nodename = ' IMG ') {
O.SRC = O.src.replace ('. gif ', '. png ');
else if (!this.ismac) {
Window.status = ' Pnghandler.applypng (): Node is not a DIV or IMG. ';
}
}

This.getbackgroundimage = function (o) {
var b, I1; background-related variables
var bgurl = null;

if (O.nodename = = ' DIV ' &&! ( This.isie && This.ismac)) {//Ie:mac PNG support broken for divs with PNG backgrounds
if (Document.defaultview) {
if (Document.defaultView.getComputedStyle) {
b = Document.defaultView.getComputedStyle (O, '). GetPropertyValue (' background-image ');
I1 = B.indexof (' url (') +4;
Bgurl = B.substr (i1,b.length-i1-1);
} else {
No computed style
}
} else {
No default view
}
}
return bgurl;
}

This.supporttest = function () {
Determine.
IE 5.5+/win32:filter

if (This.isie && this.iswin && this.ver >= 5.5) {
IE Proprietary Filter method (via Dxfilter)
Self.transform = Self.filtermethod;
else if (!this.isie && This.ver < 5) {
Self.transform = null;
No PNG Support or broken support
Leave Existing content As-is
else if (!this.isie && this.ver >= 5 | | (This.isie && this.ismac && this.ver >= 5)) {//version 5+ browser (not IE), or Ie:mac 5+
Self.transform = Self.pngmethod;
} else {
Presumably no PNG support. GIF used instead.
Self.transform = null;
return false;
}
return true;
}

This.init = function () {
if (This.supporttest ()) {
this.elements = This.getelementsbyclassname (' png ');
for (var i=0; i<this.elements.length; i++) {
This.transform (This.elements[i]);
}
}
}

}

Instantiate and initialize PNG Handler

var pnghandler = new Pnghandler ();

Demo Page HTML code:
<title>schillmania! | Png.js demo</title>
<script type= "Text/javascript" src= "Png.js" ></script>

<body>

<!--

Don ' t Copy here, this is just for your information.

Required under the
<script type= "Text/javascript" src= "Png.js" ></script>

Required in the <body> tag:



// .. Where XXX and YYY are the width/height of your image. Without width/height the PNG won ' t work under Ie:win32.

Required before the </body> tag (but after all of your content):

<script type= "Text/javascript" >
Pnghandler.init ();
</script>

This javascript block should is put on the bottom of your page, inside the <body> and before </body>.
It calls the library and replaces the GIF images (if applicable) before the page has loaded (and before the GIF has LOA Ded, so the user doesn ' t load 2 images for all PNG you want to replace.)
If you don't put it in all of the your content, it may do strange things and miss some images.

-->





<div class= "png" style= "Width:220px;height:100px;background-image:url (foo.gif); Background-repeat:no-repeat" >

</div>

<script type= "Text/javascript" >
Pnghandler.init ();
</script>

</body>

Source and Demo Package download:
Local Downloads