使用
JavaScript
一个按钮需要用到两张图来做变换
,
用
css
只需要用一张图
,
利用背景样式指定位置
,
加上超级链接与鼠标移至连结属性
,
来达到相同的效果
这张图原始高度为
110px,
利用
css
分为上下层来显示
,
高度除以
2
所以设为
height: 55px;
<head >与</head>之间
<style type="text/css">
<!--
#bot a {...} {
width: 60px;
height: 55px;
background: url(img/bot.gif) 0 0 no-repeat;
display: block;
}
#bot a:hover {...} {
width: 60px;
height: 55px;
background: url(img/bot.gif) 0 -55px no-repeat;
display: block;
}
-->
</style>
<!--
#bot a {...} {
width: 60px;
height: 55px;
background: url(img/bot.gif) 0 0 no-repeat;
display: block;
}
#bot a:hover {...} {
width: 60px;
height: 55px;
background: url(img/bot.gif) 0 -55px no-repeat;
display: block;
}
-->
</style>
<body></body>
<div id="bot"> <a href="#"></a></div>
建议为连结加上文字 <a href="#">连结文字 </a>
若你想隐藏连结文字可以在#bot a加上text-indent: -1000px;让文字跑到窗口以外 ,
在没有css环境浏览才有文字替代