In my recent project, I found a starnge behaviour of PNG file. We have created PNG files with transparent back ground for logo. Everything is working fine in IE 7 , Opera, Firefox and even in Safari. However when we saw the image in IE 6 we found a problem that it does not display as transparent back ground.
Here is the PNG file with transparent back ground. Just save it to your PC and than open it in IE. If you have IE 6 than you can see light blue back ground and if you have IE 7 it will be transparent.
Below is the html page that display png image.
<html>
<head>
<title>PNG in IE: JS Inc File </title>
<!-- Add below 3 lines in Head section as shown here. -->
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
</head>
<body>
<div class="content">
<h1>PNG in Windows IE: Inc File Demo </h1>
<p>IE now renders this PNG image properly. View the source to see how
to use the JS Include file method.</p>
<img src="AboutUSIcon.png" alt="a PNG logo" />
</div>
</body>
</html>
Fig (1) HTML page that shows PNG file.
Below is the javascript for "pngfix.js" file.Copy the above JS in new file and name it "pngfix.js".
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
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
}
}
}
Fig (2) Content of "pngfix.js"" file
Happy Programming !!
No comments:
Post a Comment