|
如何正确而且规范地使用，鼠标移动，点击时交换不同的图片；相信大家经常用的方式是 Dreamweaver 里的鼠标经过图象功能，也就是写一段 js 在客户端执行，当然这种方式可以用简单的样式表来实现。
大家都知道
<a href="#">a</a>
怎么用样式表来定义下划线，删除线，字体颜色等等。那么，我们用<a>属性来放背景图。
下面的代码参考：
<style>
img { border-style: none } /* 图片边框 */
a { background: url(step01.gif) } /* 连接的样式 */
a:hover { background: url(step02.gif) } /* 鼠标移动时的样式 */
a:active { background: url(step03.gif) } /* 鼠标点击时的样式 */
</style>
<a href="#"><img src="spacer.gif" width="47" height="47" alt=""></a>
看看是不是实现了一大堆js的效果？
由于a属性没有width和height，因此我们使用一张透明背景的图片 spacer.gif ，把A属性给撑大。
如果当两张交换的图片不一样大时怎么做？我想可以试试利用浏览器的BUG，假设a属性的width和height，然后产生对下面属性img的width和height发生反映。
下面的代码参考：
<style>
img { border-style: none } /* 图片边框 */
a { background: url(step01.gif); width: 47px; height: 47px } /* 连接的样式 */
a:hover { background: url(step02.gif); width: 20px; height: 20px } /* 鼠标移动时的样式 */
a:active { background: url(step03.gif); width: 30px; height: 30px } /* 鼠标点击时的样式 */
</style>
<a href="#"><img src="spacer.gif" alt=""></a>
|
