· [Java论坛][安全论坛][数据库论坛][操作系统论坛]
· [访谈] 网银安全系列访谈之:惊心动魄网银故事
· [热点专题] 网银安全系列 3G上网卡巡礼
· [订阅IT技术周刊][IT资源下载专区][病毒求助专区]
· [热点] 跨站脚本十二问 四步防范Conficker
· [热点] Windows 7 RC版公开下载 憾缺中文版

JS技巧:在IE浏览器中正确显示PNG透明图片

发布时间:2008.07.01 06:33     来源:赛迪网    作者:korn

PNG图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!

但目前IE中对于插入的透明背景的.png的图片是不能正常显示的。IE会自动给".png"格式的图片加个灰色背景。

解决这个的方法是增加javascript。具体方法如下:

把下面的代码放在head区就可以解决问题了。

以下是引用片段:

<script language="javascript"> 
function correctPNG()  
{ 
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 
  } 
} 
} 
window.attachEvent("onload", correctPNG); 
 </script>

也可以把这段代码单独加在一张图片上:

以下是引用片段:

<span 
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='male.png',sizingMethod='scale');"></span>

(责任编辑:云子)


[ 发表评论 ] 字体[  ] [ 打印 ] [ 进入博客 ] [ 进入论坛 ]  [ 推荐给朋友 ]
  相关文章
· 新手学堂:rs.open与conn.execute详细解释 (06-30) · 开源框架Hibernate3的新特性以及发展趋势 (06-30)
· Sun预计在年底之前将公开全部Java源代码 (06-27) · 实例解析:PHP程序开发中的中文编码问题 (06-27)
· PHP5程序中新增加日期(date)函数的常量 (06-27) · 使用PHP程序直接调用文本文件的内容实例 (06-27)
· Suse Linux系统下JAVA AWT界面乱码问题 (06-27) · Windows下的PHP5.0安装配制详解 (06-27)
· BluePage通用分页类助开发者提高开发效率 (06-26) · JSP动态网站环境搭建应用中详细步骤介绍 (06-26)
  客户需求反馈表
* 姓  名:
更多资料  了解方案  认识厂商
* 单位名称:
* 联系电话:
* 电子邮件:
资讯 通信 IT产品 IT技术 信息化
2009第七届中国电脑商年会直播
·创业投资系列访谈:产业..
·特别策划:视频网站系列..
·专题:网游虚拟货币新规..
专题:6月上市手机新品回顾及7月新机展望
·2009年中国电信业信息化..
·专题:把iPhone 3GS“解..
·WAPI重启国际标准进程 ..
专题:09年中盘点-联想春季打印机新品回顾
·InfoComm 2009 视听与集..
·网游背后的故事 网游服..
·[专题]联想ThinkPad T40..
BizSpark:微软为技术创业企业点燃火花
·社区活动:我的IT求知生..
·访谈:内网安全2009系列..
·安全访谈:网银安全之Sa..