使用button标签，实现三态图片按钮- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 使用button标签，实现三态图片按钮

Javascript: JS+XML 省份和城市之间的联动实现代码; ie与firefox下的event使用说明与详细区别; Jquery 学习笔记（二）; jQuery技巧大放送学习jquery的朋友可以看下; 使用jQuery简化Ajax开发 Ajax开发入门; jQuery入门构造函数; JavaScript iframe的相互操作浅析; JavaScript null和undefined区别分析; JavaScript 替换Html标签实现代码; jQuery 标题的自动翻转实现代码; JavaScript读取中文cookie时的乱码问题的解决方法; JavaScript 动态创建VML的方法; JavaScript Array扩展实现代码; javascript线性渐变一; javascript 线性渐变二; javascript 线性渐变三; 滑动门式菜单实现代码; extjs 学习笔记（三）最基本的grid; javascript 操作cookies及正确使用cookies的属性; JavaScript 基础知识被自己遗忘的

技术文章搜索

关键字

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 215 ::

收藏到网摘: n/a

三态图片按钮对于好的用户体验来说必不可少。我对dom事件进行一些处理，在不改变html的情况下，实现了三态按钮。下面的解决方法的关键，主要是去掉虚线选框和对背景进行定位，没有使用循环处理，任何一个按钮，只要定义了背景图片和边框为0，就自动变成了三态按钮。

点击运行可以看到效果:
[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

上面的解决方法还有点美中不足，就是在firefox下，没办法用Tab键定位按钮，这是因为为了去掉虚框，屏蔽了点击事件。下面的程序解决了这个问题，方法是在按钮里创建一个不可见的新按钮，由它转移焦点。

点击运行可以看到效果:
[Ctrl+A 全选提示:你可先修改部分代码,再按运行]