Do you know how to use JavaScript to allow ie6.0 to support images in PNG format? Here, I would like to share with you that if you insert a PNG image into a webpage, you can add a lot of color to the website content! More importantly, the quality of images on the page is improved without increasing the image size.
Use JavaScript to enable ie6.0 to support images in PNG format
PNG images have good quality. The shadow effect does not have complex edges and is smooth. If you insert a webpage, you can add a lot of colors to the website content! More importantly, the quality of images on the page is improved without increasing the image size. It is very convenient to insert images with irregular borders on over-colored backgrounds with complex backgrounds!
However, at present, the .png image inserted in the transparent background cannot be displayed normally in IE. Iewill automatically add a gray background to the images in the ". PNG" format.
To solve this problem, add JavaScript. The specific method is as follows:
Set the followingCodeIn the head area, you can solve the problem.
The following is a reference clip:
<Script language = "JavaScript">
Function Correctpng ()
{
For ( VaR I = 0; I <document. Images. length; I ++)
{
VaR IMG = Document. Images [I];
VaR Imgimgname = 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. parentnode. 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;
}
}
}
</SCRIPT>
You can also add this code to an image separately:
The following is a reference clip:
<Span style = "filter: progid:
DXImageTransform. Microsoft. alphaimageloader
(Srcw.'male.png ', sizingmethod = 'Scale'); "> </span>
Another point: the width and height of all PNG images must be added. Otherwise, the image size will change.