连结样式-用一张图做连结图片变换

  
使用 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>

<body></body>

 

<div id="bot"> <a href="#"></a></div>

 

建议为连结加上文字 <a href="#">连结文字 </a>
若你想隐藏连结文字可以在#bot a加上text-indent: -1000px;让文字跑到窗口以外
,
在没有css环境浏览才有文字替代

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值