A three-state picture button is 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 marquee and position the background, without using a loop, any button, as long as the background picture and border is defined as 0, automatically become a three-state button.
<textarea id="runcode86838"><body> <button ></button> </body> <script> if (document.all) Document.execcomma nd ("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.styl e.backgroundposition= "0 0"} </script></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The above solution is still a bit of a drawback, that is, under Firefox, there is no way to use the tab to locate the button, this is because in order to remove the virtual box, shielding the Click event. The following program solves the problem by creating an invisible New button in the button that shifts the focus.
<style> button{border:0} </style> <body> <button ></button> </body> <script& Gt if (document.all) Document.execcommand ("Backgroundimagecache", False,true) document.body.onload=function () {if () cument.activeelement.tagname== "button") Document.activeElement.blur ()} Document.onmouseover=document.onmouseou T=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:absolut e;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.styl e.backgroundposition= "0 0"}} </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
