js实现IE6浏览器PNG图片透明方法总结

例1

有时候按钮并不能存成jpg，因为jpg不透明；

有时候渐变并不能存成gif，因为gif会有颗粒；

所以很多时候，我们要用到png格式，但是IE6并不兼容PNG图片的透明或者是透明度。

而且分为两种情况，一种是PNG图片背景，另一种是插入式的PNG图片。

现在提供解决“插入式的PNG图片”透明问题。

解决办法是在页面头部里插入一段JS即可。

个人标记一下“招聘语音聊天室管理员页面”应用了此方法。

 代码如下 复制代码

<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>

例2

直接在HTML加入一段JS即可

 代码如下 复制代码

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–) {
            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.attachEvent) {
                addLoadEvent(fnLoadPngs);
            }
        }
    }
}();

bgsleight.init();
时间： 2024-10-27 23:40:55

js实现IE6浏览器PNG图片透明方法总结的相关文章

解决ie6下png图片透明的完美方法

看了很多网上有关解决ie6下png图片透明的文章,很多都是只解决了页面上插入png图片或css背景调用,而且都没用透明效果,在ie6下仅实现了去除灰底色.今天特下载网上一些优秀页面进行分析整合,整理了两套相当有效的解决方案,可以同时支持插入图片或css背景调用问题. 更新下载版本说明: 1."ie6-png-2(filter)"文件中,滤镜控制调用背景透明和js控制插入图片透明不能同时出现,这样在不同浏览器下会有问题,可以分开使用: 2."ie6-png-1(js)"

JS实现按比例缩放图片的方法(附C#版代码)_javascript技巧

本文实例讲述了JS实现按比例缩放图片的方法.分享给大家供大家参考,具体如下: js版本: function resizeImage(obj, MaxW, MaxH) { var imageObject = obj; var state = imageObject.readyState; if(state!='complete') { setTimeout("resizeImage("+imageObject+","+MaxW+","+MaxH+&

ie6下png图片透明解决方案

一点不影响速度.还有一种方法图片多时会变慢,而且必须准备一张透明的小图片transparent.gif,放在和html相同的目录,因操作麻烦,所以没有分享. 写法如下: <style type="text/css"> .mypng img { azimuth: expression( this.pngSet?this.pngSet=truethis.nodeName == "IMG" && this.src.toLowerCase().i

IE浏览器PNG图片透明效果代码_javascript技巧

首先看我们的<img>标签代码: <img src="Example.png" border="0" alt="放大镜" /> 我们将利用IE中特有的特效来满足这个要求,这就是AlphaImageLoader Filter (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/alphaima

JS解决ie6下png透明方法

  解决ie6下png透明的问题想必前端都比较清楚,虽然有很多方法,但是我觉得用JS还是最省事的方法,不管是图片还是背景图片都OK. <!DOCTYPE html> <html lang="en"> <head> <title>解决ie6下png透明方法之JS法-</title> <style type="text/css"> .a{background: #FFFF99 ; backgroun

JS解决ie6下png透明的方法实例

解决ie6下png透明的问题想必前端都比较清楚,虽然有很多方法,但是我觉得用JS还是最省事的方法,不管是图片还是背景图片都OK.   复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <title>解决ie6下png透明方法之JS法-</title> <style type="text/css">  .a{background: #FFFF99

ie6下png图片背景不透明的解决办法使用js实现_javascript技巧

我们时常在使用png图片的时候,在ie6下发生背景不透明的问题,下面给大家介绍下一个js解决的方式. 首先我们要用到一个js,代码如下: 复制代码 代码如下: /** * DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML <IMG/>. * Author: Drew Diller * Email: drew.diller@gmail.com * URL: http://www.diller

JS解决ie6下png透明的方法实例_javascript技巧

复制代码 代码如下: <!DOCTYPE html><html lang="en"><head><title>解决ie6下png透明方法之JS法-</title><style type="text/css"> .a{background: #FFFF99 ;  background-image: url(bg.jpg); height:800px;padding: 50px;  } .b{ fl

基于jQuery IE6下PNG图片背景透明问题解决方法

基于jQuery IE6下PNG图片背景透明问题解决方法 IE6问题真的很多,其中有一个问题是PNG图片背景无法变成透明,取而代之的是一个色块,有时候我们想用png透明图片来做小图标,这个在IE6下就纠结了,下面我们用一个jquery插件来解决这个问题,希望能帮上大家. 首先下载SuperSleight for jQuery,再下载一张透明gif图片transparent.gif. 引用脚本: <script type="text/网页特效" src="/scripts