IE6中让png的icon图标也透明的完整代码段
一个引用了在IE6中让img图标也可引用png图片的js插件代码的html是这样写的,兼容IE6:
<a class="btn btn-select" href="javascript:fensong_addaccept()">
<img src="__STATIC__/yjj/images/16.png" width="16" height="16" style="display:inline-block;position:relative;top:7px;margin-right:2px;_zoom:1;_display:inline;line-height:16px;" /><span class="addtxt">添加发送单位</span></a>
注意:
1、为了实现display:inline-block;效果,在IE6中必须加上_zoom:1;_display:inline;这么两个属性来兼容
2、line-height:16px;行高一定要写,因为图标的高度是16,但是父元素的行高属性在IE6中会影响到img标签,所以这里得明确定义行高值,否则图标会被拉伸
3、引用了下面透明化js代码的img标签要定位的话,必须写在行内样式style里面,否则无效。汗,好几个坑,实践出真知啊!
4、只要在页面中引用了下面的js代码段,那么在页面的任何位置img标签都可以任意写
js插件代码:可以让一个项目中所有引用了png图片的img标签全透明化
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);
IE6中让png的icon图标也透明的完整代码段的更多相关文章
- EasyUI中使用自定义的icon图标
我们在web开发中为了界面的更加漂亮,我们可能会使用EasyUI框架来帮我们实现一些好看的效果,那么在框架里面提供了很多的样式和图标,但是有时候自带的图标已经满足不了我们啦,这时候我们应该往里面加入我 ...
- 在安卓开发中需要格式化桌面icon图标
使用以下在线工具即可实现http://www.makeicon.cc/home/index
- 实际项目中积累的一些关于事件的简单应用JS代码段(能力有限,不喜轻喷,23333)
1:鼠标移入移出显示另一张图片 var yuanquan_1 = document.getElementById("yuanquan_1" ); yuanquan_1. onmo ...
- VS中常用C#代码段快速输入总结
转自:https://blog.csdn.net/a980433875/article/details/12231673 Visual Studio 中有很多代码段都可以直接简写然后按TAB快速输入编 ...
- 字体在网页中画ICON图标
用字体在网页中画ICON图标有三种小技巧: 1.用CSS Sprite在网页中画小图标 实现方法: 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置,给背景定位.background- ...
- 在网页中制作icon图标
用字体在网页中画icon图标 第一步:获取字体资源IconMoon网站https://icomoon.io iconMoon中有很多免费小图标可用,还能设置下载图标的使用属性(通过网站中设立的按钮pr ...
- 用字体在网页中画Icon图标
第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...
- easyui中tree控件添加自定义图标icon
来源于:http://blog.163.com/lintianhuanhai@126/blog/static/165587366201421704420256/ <!DOCTYPE html&g ...
- 18 Zabbix 新增map中的icon图标
点击返回:自学Zabbix之路 18 Zabbix 新增map中的icon图标 zabbix系统默认会带有许多的icon图标,但对于特殊需求人群可能无法满足,那就需要新增icon图标. 通过Admin ...
随机推荐
- iOSFMDB和CoreData
转发:http://wenku.baidu.com/link?url=LSPSZSPxN4pVwWNwqEXSoY0-jlnXq-_14C7qV1FV9_gFIMPjdKlXrG4Nrh_08EZS1 ...
- 转:Windows下用sftp自动下载文件
远程服务器是Linux操作系统,没有ftp服务,可以ssh,数据库每天2:00会自动创建一个备份文件,本地计算机是windows操作系统,希望用sftp每天3:00下载远程服务器上的备份文件.本地系统 ...
- ural1855 Trade Guilds of Erathia
Trade Guilds of Erathia Time limit: 2.0 secondMemory limit: 64 MB The continent of Antagarich was co ...
- mysql触发器的使用
环境情况: 表1:residential_building,住宅楼表:id,community(所属社区),countFloor(楼层数),countUnit(单元数),countHomesInUni ...
- js浏览器兼容
//window.event IE:有window.event对象 FF:没有window.event对象.可以通过给函数的参数传递event对象.如onmousemove=doMouseMo ...
- 基于css3的环形动态进度条(原创)
基于css3实现的环形动态加载条,也用到了jquery.当时的想法是通过两个半圆的转动,来实现相应的效果,其实用css3的animation也可以实现这种效果.之所以用jquery是因为通过jquer ...
- 2014专业知识学习---be strong
一 公司工作 完成好自动化营销系统构建,并以此为契机掌握推荐,数据分析,可视化等知识 1 完成统计和可视化.具体参考 cookie mapping项目规划 2 以广告投放为契机,学习数据分析,推荐系统 ...
- PHP安装插件方式
PHP安装插件方法主要有两种: 1.先安装相关的库,zlib.curl.xml等,然后在安装 php 时的 ./configure 中设置 --with-xxx(你需要的插件),三部曲安装即可. 2. ...
- MAC平台下mysql7.5的安装
1.下载mysql(DMG格式64位的版本) http://dev.mysql.com/downloads/mysql/ 2.安装mysql 待下载*.dmg文件后双击,运行该安装文件 3.无限下一步 ...
- Apache的Directory配置指南
使用<Directory>… </Directory>设置指定目录的访问权限,其中可包含:Options.Allow.Override.Order.Allow.Deny.Req ...