首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >用CSS制作可交换带事件处理的图片按钮

用CSS制作可交换带事件处理的图片按钮

作者头像
用户1075292
发布2018-01-23 10:33:25
发布2018-01-23 10:33:25
1.8K0
举报
文章被收录于专栏:听雨堂听雨堂

      按钮是网页最常用的控件了,怎样设计一个更好看的按钮,这两天试验了几种方法:

      1、用Javascript交换图片的方式先在网页中制作图片,然后把图片转换为服务器端控件,为该控件添加事件处理。不过,很遗憾,运行时不响应,我估计跟图片被交换了有关。

      2、按钮在交到页面时,其实就是一个input,那么用css写一个样式就ok了。结果,发现客户端的页面中,按钮的ID虽然是原来的ID,但是写的CSS并没有起作用。原来,.net自己为按钮加了一个style,优先级显然比自定义的要高了。看来得想办法把系统自动加的style屏蔽掉才行。

      3、再试HyperLink,为它写css,结果图片交换没有问题,可是又无法把按钮事件加上。

      4、最后,用LinkButton,仍然以LinkButton的ID写css,然后把文字去掉。结果,交换图片效果和事件处理都能兼顾。

      也许还有更好的办法吧,不过这样已经比较简单了。只要改css就基本搞定一切了。CSS很简单:

代码语言:javascript
复制
#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);
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2006-12-10 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档