Example 1
Sometimes a button cannot be stored as a JPG because JPG is opaque;
Sometimes a gradient does not exist as a GIF, because the GIF has particles;
So many times we use the PNG format, but IE6 is not compatible with the transparency or transparency of PNG images.
And there are two situations, one is the PNG picture background, the other is the inserted PNG picture.
Now provides a solution to the "Insert PNG picture" transparency issue.
The solution is to insert a section of JS in the head of the page.
Personally mark the "recruiting Voice chat Room Administrator Page" applies this method.
| The code is as follows |
Copy Code |
| <script language= "JavaScript" >
function correctpng ()//correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arversion = navigator.appVersion.split ("MSIE")
var version = parsefloat (Arversion[1])
if ((version >= 5.5) && (document.body.filters))
{
for (var j=0; j<document.images.length; J + +)
{
var img = document.images[j]
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
j = J-1
}
}
}
}
Window.attachevent ("onload", correctpng);
</script> |
Example 2
Add a section of JS directly to the HTML
| The code is as follows |
Copy Code |
| var bgsleight = function () {
function Addloadevent (func) {
var oldonload = window.onload;
if (typeof window.onload!= ' function ') {
Window.onload = func;
} else {
Window.onload = function () {
if (oldonload) {
Oldonload ();
}
Func ();
}
}
}
function Fnloadpngs () {
var rslt = Navigator.appVersion.match (/msie (d+.d+)/, ");
var Itsallgood = (rslt!= null && number (RSLT[1)) >= 5.5);
for (var i = document.all.length–1, obj = null; (obj = document.all[i]); I-Compact) {
if (Itsallgood && obj.currentStyle.backgroundImage.match (/.png/i)!= null) {
Fnfixpng (obj);
Obj.attachevent ("Onpropertychange", fnpropertychanged);
}
}
} function fnpropertychanged () {
if (Window.event.propertyName = = "Style.backgroundimage") {
var el = window.event.srcElement;
if (!el.currentstyle.backgroundimage.match (/x.gif/i)) {
var bg = el.currentStyle.backgroundImage;
var src = bg.substring (5,bg.length-2);
El.filters.item (0). src = src;
el.style.backgroundImage = "url (x.gif)";
}
}
} function Fnfixpng (obj) {
var bg = obj.currentStyle.backgroundImage;
var src = bg.substring (5,bg.length-2);
Obj.style.filter = "Progid:DXImageTransform.Microsoft.AlphaImageLoader (src= '" + src + "', sizingmethod= ' scale ')";
obj.style.backgroundImage = "url (x.gif)";
}
return {
Init:function () {
if (Navigator.platform = = "win32″&& navigator.appname =" Microsoft Internet Explorer && Window.attache Vent) {
Addloadevent (fnloadpngs);
}
}
}
}(); Bgsleight.init (); |
