Home  >  Article  >  Web Front-end  >  Use button tags to implement three-state picture buttons_form special effects

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

WBOY
WBOYOriginal
2016-05-16 19:21:541355browse

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.


[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.

[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>
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn