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

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

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 ee=e==null?event.srcElement:e.target
e=e||event
if(ee.tagName!="BUTTON"||ee.clientWidth!=ee.offsetWidth)
return
if(e.type=="mousedown"){
ee.style.backgroundPosition="0 -"+(2*ee.offsetHeight)
if(document.all)
ee.hideFocus=true
else
return false
}
if(e.type=="mouseover"||e.type=="mouseup")
ee.style.backgroundPosition="0 -"+ee.offsetHeight
if(e.type=="mouseout")
ee.style.backgroundPosition="0 0"
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

button{border:0}

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"
}
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]