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

更新时间：2007年01月08日 00:00:00 作者：

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

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

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

<style> button{border:0} </style> <body> <button style="width:53;height:17;background:url(https://www.jb51.net/upload/button_a.png)"></button> </body> <script> if(document.all)     document.execCommand("BackgroundImageCache",false,true) document.body.onload=function(){     if(document.activeElement.tagName=="BUTTON")         document.activeElement.blur() } document.onmouseover=document.onmouseout=document.onmousedown=document.onmouseup=function(e){     var o,ee=e==null?event.srcElement:e.target     e=e||event     if(ee.tagName=="BUTTON"&&ee.clientWidth==ee.offsetWidth){         if(e.type=="mousedown"){             if((ee.lastChild||"").tagName!="BUTTON"){                 o=document.createElement("button")                 o.style.cssText="position:absolute;left:-9000"                 ee.appendChild(o)                 ee.onfocus=function(){ee.lastChild.focus()}             }             ee.style.backgroundPosition="0 -"+(2*ee.offsetHeight)         }         if(e.type=="mouseover"||e.type=="mouseup")             ee.style.backgroundPosition="0 -"+ee.offsetHeight         if(e.type=="mouseout")             ee.style.backgroundPosition="0 0"     } } </script>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

相关文章

javascript获得光标所在的文本框(text/textarea)中的位置
移动鼠标，得到单元格所在表中的位置的js代码,测试兼容firefox,需要的朋友可以参考下。
2009-12-12
onpropertypchange
onpropertypchange...
2006-07-07
JS 动态添加列表框项效果代码
动态添加列表框项，不错的效果，需要用的朋友可以参考下。
2009-07-07
用javascript实现改善用户体验之alert提示效果
用javascript实现改善用户体验之alert提示效果...
2007-10-10
select发展史超强
select发展史超强...
2007-02-02
js实时计算字数提醒的文本框
那天在一个论坛上看到一个相当有意思的功能，就是在文本框中输入字符的时候，旁边会提示还可以输入多少个字。
2010-07-07
用户注册常用javascript代码
用户注册常用javascript代码,大家可以保存运行看下效果。
2009-08-08
javascript 单选按钮单击选中双击取消选择实现代码
很多情况下，我们需要对radio单选框实现取消选择，这里用js的实现方法，确实不错。
2010-08-08
javascript下兼容firefox选取textarea文本的代码
兼容firefox和ie的选取textarea文本的方法
2008-06-06
IE6下js通过css隐藏select的一个bug
想起ie6下，臭名昭著的select需要用iframe遮罩的bug，估计和上面的bug根由是一样的
2010-08-08

最新评论