Javascript is used in ie6.0 to support images in PNG format.

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.