PNG transparent webpage support

PNG transparent support for web pages (IE6, IE7, and Firefox passed tests)
The defect that IE6 does not support PNG translucent images brings great inconvenience to the web design. We have previously introduced how to use the filter + hack method to display PNG, but it is quite tedious to implement it. There is also a more popular method on the Internet, which is simpler. The following describes this method in detail:

Save the following code as correctpng. js
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.css text
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
};
};
};

If (navigator. useragent. indexof ("MSIE")>-1)
{
Window. attachevent ("onLoad", correctpng );
};

Reference <script language = JavaScript src = "correctpng. js" type = text/JavaScript> In the webpage header </SCRIPT>
Use the IMG label directly.

**************************************** **************************************** **********

Method 1: solve the problem of the whole-site PNG background transparency through the CSS and IE proprietary attributes Behavior

<Style type = "text/CSS">
<! --
IMG {behavior: URL (/iepngfix. HTC );}
-->
</Style>

HTC File Content

<Public: component>
<Public: attach event = "onpropertychange" onevent = "dofix ()"/>
<SCRIPT type = "text/JavaScript">
// Ie5.5 + PNG Alpha fix v1.0rc3
// (C) 2004-2005 Angus Turnbull http://www.twinhelix.com
// This is licensed under the CC-GNU lgpl, Version 2.1 or later.
// For details, see: http://creativecommons.org/licenses/LGPL/2.1/
// This must be a path to a blank image. That's all the configuration you need.
VaR blankimg = '/spacer.gif ';
VaR F = 'dximagetransform. Microsoft. alphaimageloader ';
Function filt (S, m)
{
If (filters [f])
{
Filters [f]. Enabled = s? True: false;
If (s) with (filters [f])
{
Src = s;
Sizingmethod = m;
}
}
Else if (s)
{
Style. Filter = 'progid: '+ F +' (src = "'+ S +'", sizingmethod = "'+ M + '")';
}
}
Function dofix ()
{
// Assume IE7 is OK
If (! /MSIE (5 \. 5 | 6 \.)/. Test (navigator. useragent) | (event &&! /(Background | SRC)/. Test (event. propertyname )))
{
Return;
}
VaR bgimg = currentstyle. backgroundimage | style. backgroundimage;
If (tagname = 'img ')
{
If (/\. PNG $/I). Test (SRC ))
{
// This tests to see if the image has already been replaced once before
If (SRC. indexof ('? Repurl = ') =-1)
{
If (currentstyle. width = 'auto' & currentstyle. Height = 'auto ')
{
Style. width = offsetwidth + 'px ';
}
Filt (SRC, 'Scale ');
Src = blankimg + '? Repurl = '+ SRC;
}
}
Else if (SRC. indexof (blankimg) <0)
{
Filt ();
}
}
Else if (bgimg & bgimg! = 'None ')
{
If (bgimg. Match (/^ URL [("'] + (. * \. PNG) [)"'] + $/I ))
{
VaR S = Regexp. $1;
If (currentstyle. width = 'auto' & currentstyle. Height = 'auto ')
{
Style. width = offsetwidth + 'px ';
}
Style. backgroundimage = 'none ';
Filt (S, 'crop ');
// Ie link fix
For (VAR n = 0; n <childnodes. length; n ++)
{
If (childnodes [N]. Style) {childnodes [N]. style. Position = 'relative '};
}
}
Else filt ();
}
}
Dofix ();
</SCRIPT>
</Public: component>

Method 2: Use the CSS ie filter.
<Style type = "text/CSS">
<! --
. Pngpic {filter: progid: DXImageTransform. Microsoft. alphaimageloader (src = '/pngpic.png', sizingmethod = 'crop ');}
-->
</Style>

Method 3: use JavaScript and CSS filters to solve the problem of transparent background of the entire site PNG in IE.
<SCRIPT type = "text/JavaScript" Language = "JavaScript">
Function enablepngimages (){
VaR imgarr = Document. getelementsbytagname ("IMG ");
For (I = 0; I If (imgarr [I]. SRC. tolowercase (). lastindexof (". PNG ")! =-1 ){
Imgarr [I]. style. filter = "progid: DXImageTransform. microsoft. alphaimageloader (src = '"+ imgarr [I]. SRC + "', sizingmethod = 'auto ')";
Imgarr [I]. src = "spacer.gif ";
}

If (imgarr [I]. currentstyle. backgroundimage. lastindexof (". PNG ")! =-1 ){
VaR IMG = imgarr [I]. currentstyle. backgroundimage. substring (5, imgarr [I]. currentstyle. backgroundimage. Length-2 );
Imgarr [I]. style. Filter = "progid: DXImageTransform. Microsoft. alphaimageloader (src = '" + IMG + "', sizingmethod = 'crop ')";
Imgarr [I]. style. backgroundimage = "url(spacer.gif )";
}
}
}

Function enablebgpngimages (bgelements ){
For (I = 0; I <bgelements. length; I ++ ){
If (bgelements [I]. currentstyle. backgroundimage. lastindexof (". PNG ")! =-1 ){
// Alert (bgelements [I]);
VaR IMG = bgelements [I]. currentstyle. backgroundimage. substring (5, bgelements [I]. currentstyle. backgroundimage. Length-2 );
Bgelements [I]. style. Filter = "progid: DXImageTransform. Microsoft. alphaimageloader (src = '" + IMG + "', sizingmethod = 'crop ')";
Bgelements [I]. style. backgroundimage = "url(spacer.gif )";
}
}
}
</SCRIPT>

<! -- [If lt IE 7]>
<SCRIPT type = 'text/JavaScript '>
VaR bgelements;
Enablepngimages ();
If (bgelements ){
Enablebgpngimages (bgelements );
}
</SCRIPT>
<! [Endif] -->

**************************************** **************************************** ************

At present, most browsers do not fully support PNG. Although Ie can display PNG images, if PNG images contain transparent parts, the display of transparent parts is not normal.

There are roughly the following methods to solve this problem (the Principles are solved by the alphaimageloader filter ).

Method 1:

<Div style = "filter: progidximagetransform. Microsoft. alphaimageloader (src =/images/header.png); width: 200px; Height: 50px"> </div>

Comment: although this method can better solve the problem of IE 5 + browsers, Firefox, which can normally display transparent PNG images, cannot be displayed normally!

Method 2:

<SCRIPT type = "text/JavaScript">
// PNG correction Control 1.0 for IE 5.5 or higher.
// Author: SHUN ZI

Function isie (){
If (navigator. appname! = "Microsoft Internet Explorer" {return false}
Return true
}

Function correctpng ()
{
For (VAR I = 0; I <document. Images. length; I ++)
{
VaR IMG = Document. Images
VaR LW = IMG. Width
VaR LH = IMG. Height
VaR imgname = IMG. SRC. touppercase ()
If (imgname. substring (imgname. Length-3, imgname. Length) = "NG"
{
IMG. style. Filter + = "progidximagetransform. Microsoft. alphaimageloader (src =" + IMG. SRC + ", sizingmethod = scale );"
IMG. src = "/images/transparent.gif" // transparent GIF image with transparent.gif 1px * 1px
IMG. width = LW
IMG. Height = lh
}
}
}
If (isie () {window. attachevent ("onLoad", correctpng );}
</SCRIPT>

Comments: This method can solve this problem, but if it is not for local debugging, it usually takes some time to switch!

Method 3:

<Div id = "Header"> <! -- This div is the region where the PNG Image needs to be inserted -->
<SCRIPT type = "text/JavaScript">
If (navigator. appname! = "Microsoft Internet Explorer "{
Document. write (" ";
} Else {
Document. write (" ";
}
</SCRIPT>
<Div>
Comments: in fact, there are not many places where transparent PNG images are absolutely needed on the webpage. Therefore, if you only use one or two transparent PNG images on the webpage, we suggest using this method.

If the browser disables JS, Methods 2 and 3 certainly do not work. For method 3, we can make some improvements:

<Div id = "Header">
<Div id = "index_header"> Brief description of the image. Do not disable Js for normal browsing. </div>
<Div>

<SCRIPT type = "text/JavaScript">
If (navigator. appname! = "Microsoft Internet Explorer "){
Document. getelementbyid ('logo '). innerhtml = "} Else {
Document. getelementbyid ('logo '). innerhtml = "/>"
}
</SCRIPT>