没事对浏览器特性研究了一下，用样式表来实现鼠标经过图片，点击图片交换图片。
怎么做？我想如果IE浏览器最简单不过了，但换作Mozilla,FireFox...那可真是一个头疼的问题。
为了适应任何浏览器，我在这里只做简单介绍，假设我有两张图片，宽为：93px 高为：45px
样式表
.m1 {
background: url(../images/01.jpg); width: 93px; height: 45px;
/* Mozilla, height+14 */ padding:0 45px 31px 48px!important;
padding: 0
/* tesion design */
}
.m1:hover{ background: url(../images/01on.jpg) }
url(../images/01on.jpg) 这里图片为你图片的实际路径
html里是这样的
<a href="#" class="m1"></a>
自己试试？如何？是不是很简单？
/* Mozilla, height+14 */ padding:0 45px 31px 48px!important; padding: 0
这句话的作用在此简单解说一下！
Mozilla,FireFox 都是 mozilla 这家人的，所以随便用一个测试就可以了。
height+14，相信大家也明白我的注释意思了吧？高+14，在 mozilla浏览器里。IE可以直接定义a属性的width和height，但mozilla好象不起作用？那么，用内填充padding来撑大，但撑的同时，IE已经定义了width和height，那就不能让IE错乱了吧？刚好!important声明起作用了。由于IE浏览器对该声明并不在乎，也就是说，样式默认是读最后一个的，因此我们让MOZILLA读第一个padding设置，IE读第二个。
padding顺序：上,右,下,左 ，很容易记，是顺时针的。
mozilla有个奇怪的bug,在此大家试的过程一定会发觉，因此我不定义“上”的填充数值。左和右随便定义，或者左为0，右93px（图片宽93px）。那高就是原来的 45PX - 14PX = 31PX
OKAY... 一个试验品，相信可以带来更多的方便。
各位若有问题可以在我群里提出来。谢谢
至于怎么做鼠标点击时，点过的连接图片，大家可以看看样式表手册，其实DW里早已经有分出来，我在此不多说了，眼见为实。 :hover 是鼠标经过时超连接样式规则
Trackback: http://tb.donews.net/TrackBack.aspx?PostId=441084