Use button tags to implement three-state picture buttons_form special effects

Three-state image buttons are essential for a good user experience. I did some processing of dom events and implemented a three-state button without changing the html. The key to the following solution is to remove the dotted selection box and position the background without using loop processing. Any button will automatically become a three-state button as long as the background image and border are defined as 0.

<button style="width:53;height:17;border:0;background:url(http://www.jb51.net/upload/button_a.png)"></button>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh it before it can be executed

]

There are a few more solutions to the above The only drawback is that under Firefox, you cannot use the Tab key to locate the button. This is because the click event is blocked in order to remove the virtual frame. The following program solves this problem by creating a new, invisible button within the button that shifts the focus.

<style> button{border:0} </style> <button style="width:53;height:17;background:url(http://www.jb51.net/upload/button_a.png)"> </button>
[Ctrl A select all Note:

If you need to introduce external Js, you need to refresh to execute <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 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" } </script>]<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>