腾讯云·社区
用CSS制作可交换带事件处理的图片按钮
按钮是网页最常用的控件了，怎样设计一个更好看的按钮，这两天试验了几种方法：
1、用Javascript交换图片的方式先在网页中制作图片，然后把图片转换为服务器端控件，为该控件添加事件处理。不过，很遗憾，运行时不响应，我估计跟图片被交换了有关。
2、按钮在交到页面时，其实就是一个input，那么用css写一个样式就ok了。结果，发现客户端的页面中，按钮的ID虽然是原来的ID，但是写的CSS并没有起作用。原来，.net自己为按钮加了一个style，优先级显然比自定义的要高了。看来得想办法把系统自动加的style屏蔽掉才行。
3、再试HyperLink，为它写css，结果图片交换没有问题，可是又无法把按钮事件加上。
4、最后，用LinkButton，仍然以LinkButton的ID写css，然后把文字去掉。结果，交换图片效果和事件处理都能兼顾。
也许还有更好的办法吧，不过这样已经比较简单了。只要改css就基本搞定一切了。CSS很简单：
#ok{
position:relative;
border:0px solid #000000;
height:42px;
width:110px;
top:85px;
left:60px;
position:relative;
}
#OkBtn{
display:block;
width:100%;
height:100%;
background-image:url(../images/login_ok_1.jpg);
}
#OkBtn:hover{
background-image:url(../images/login_ok_2.jpg);
}本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。
相关文章
扫码关注云+社区
领取腾讯云代金券
我来说两句