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

changyucun 楼主

三态图片按钮就是当鼠标还未移到时,按钮显示一种平面图像；当鼠标移到按钮时，按钮呈现出加亮的平面图像；当鼠标在按钮点击时,按钮呈现凹立体图像

图片如下

<button style="border:0;width:53;height:17;background:url('http://bbs.blueidea.com/attachments/2007/7/6/20070706_6fa45d7488a3127364a7csTUMlDwFrdS.gif')"></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>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

jemysky

好象直接css就能做到了吧？？？？

用这么复杂吗

？


很佩服你

生活越简单越好
变成也是一个样

changyucun 楼主

<style type="text/css"> #menu a { display:block; width:120px; margin: 10px 0; padding: 6px 0 8px 20px; font-size: 12px; color:#c60; background: url("http://bbs.blueidea.com/attachments/2007/7/6/20070706_eea408c487eb463488fcWGU4bHEJO7jf.gif") 0 0 no-repeat; text-decoration: none; } #menu a:hover { background-position: -157px 0; color: #E9BE75; } #menu a:active { background-position: -314px 0; color:white; } </style> <div id="menu"> <a href="javascript:">按鈕一</a> <a href="javascript:">按鈕二</a> <a href="javascript:">按鈕三</a> <a href="javascript:">按鈕四</a> <a href="javascript:">按鈕五</a> </div>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

是这种吧

[ 本帖最后由 changyucun 于 2007-7-6 15:04 编辑 ]

changyucun 楼主

原帖由 jemysky 于 2007-7-6 14:50 发表
好象直接css就能做到了吧？？？？

用这么复杂吗

？


很佩服你

生活越简单越好
变成也是一个样

简单固然是好，但是小的觉得有些东西不是简单就行的，嘻嘻，谢谢楼上提的意见，纠正楼上的错别字，编程 != 变成，

还有，向楼上的取经，怎么用CSS实现button三态按钮，不是A链接那种

[ 本帖最后由 changyucun 于 2007-7-6 15:06 编辑 ]

xingesoft

确实有点复杂。

YKAI

好像楼主认为css就不需要编程了，只有你那种才叫编程，可笑！！！

caiying2007

????????????????????????

[ 本帖最后由 caiying2007 于 2007-7-7 11:36 编辑 ]

changyucun 楼主

原帖由 YKAI 于 2007-7-6 21:47 发表
好像楼主认为css就不需要编程了，只有你那种才叫编程，可笑！！！

我没有说css就不需要编程，也没有认为这种才叫编程，我只是在论坛转贴一些我认为大家可能需要的东西，顺便向大家学习，我知道我很菜，但是我不知道我哪里可笑，不知道阁下认为我哪里可笑，认为我很菜可笑，还是认为我纠正高手的错别字可笑。

fyunsy

其实，楼主这个是好东西~~~~

91first

我最怕js 了，楼主这方面强