Web上仿Window按钮

<script>
document.οnmοuseοver=doOver;
document.οnmοuseοut=doOut;
document.οnmοusedοwn=doDown;
document.οnmοuseup=doUp;

function doOver()
{
 var toEl=EvalReal(window.event.toElement,"className","MenuButton");
 var fromEl=EvalReal(window.event.fromElement,"className","MenuButton");
 if(toEl==fromEl) return;
 var el=toEl;

 var cDisabled=el.cDisabled;
 cDisabled=(cDisabled!=null);
 
 if(el.className=="MenuButton")
  el.onselectstart=new Function("return false");
 
 if((el.className=="MenuButton")&&!cDisabled)
 {
  ItemRaised(el);
  ItemGray(el,false);
 }
}

function doOut()
{
 var toEl=EvalReal(window.event.toElement,"className","MenuButton");
 var fromEl=EvalReal(window.event.fromElement,"className","MenuButton");
 if(toEl==fromEl) return;
 var el=fromEl;

 var cDisabled=el.cDisabled;
 cDisabled=(cDisabled!=null);

 var cToggle=el.cToggle;
 toggle_disabled=(cToggle!=null);

 if(cToggle&&el.value)
 {
  ItemPressed(el);
  ItemGray(el,true);
 }
 else if((el.className=="MenuButton")&&!cDisabled)
 {
  ItemFlat(el);
  ItemGray(el,true);
 }
}

function doDown()
{
 el=EvalReal(window.event.srcElement,"className","MenuButton");
 
 var cDisabled=el.cDisabled;
 cDisabled=(cDisabled!=null);
 
 if((el.className=="MenuButton")&&!cDisabled)
 {
  ItemPressed(el);
 }
}

function doUp()
{
 el=EvalReal(window.event.srcElement,"className","MenuButton");
 
 var cDisabled=el.cDisabled;
 cDisabled=(cDisabled!=null);
 
 if((el.className=="MenuButton")&&!cDisabled)
 {
  ItemRaised(el);
 }
}

function EvalReal(el,type,value)
{
 temp=el;
 while((temp!=null)&&(temp.tagName!="BODY"))
 {
  if(eval("temp."+type)==value)
  {
   el=temp;
   return el;
  }
  temp=temp.parentElement;
 }
 return el;
}

function findChildren(el,type,value)
{
 var children=el.children;
 var tmp=new Array();
 var j=0;
 
 for(var i=0;i<children.length;i++)
 {
  if(eval("children[i]."+type+"==/""+value+"/""))
  {
   tmp[tmp.length]=children[i];
  }
  tmp=tmp.concat(findChildren(children[i],type,value));
 }
 return tmp;
}

function disable(el)
{
 if(document.readyState!="complete")
 {
  window.setTimeout("disable("+el.id+")",100);
  return;
 }
 
 var cDisabled=el.cDisabled;
 
 cDisabled=(cDisabled!=null);

 if(!cDisabled)
 {
  el.cDisabled=true;
  
  el.innerHTML='<span style="background: buttonshadow; width: 100%; height: 100%; text-align: center;">'+'<span style="filter:Mask(Color=buttonface) DropShadow(Color=buttonhighlight, OffX=1, OffY=1, Positive=0); height: 100%; width: 100%%; text-align: center;">'+el.innerHTML+'</span>'+'</span>';

  if(el.onclick!=null)
  {
   el.cDisabled_οnclick=el.onclick;
   el.οnclick=null;
  }
 }
}

function enable(el)
{
 var cDisabled=el.cDisabled;
 
 cDisabled=(cDisabled!=null);
 
 if(cDisabled)
 {
  el.cDisabled=null;
  el.innerHTML=el.children[0].children[0].innerHTML;

  if(el.cDisabled_onclick!=null)
  {
   el.οnclick=el.cDisabled_onclick;
   el.cDisabled_οnclick=null;
  }
 }
}

function addToggle(el)
{
 var cDisabled=el.cDisabled;
 
 cDisabled=(cDisabled!=null);
 
 var cToggle=el.cToggle;
 
 cToggle=(cToggle!=null);

 if(!cToggle&&!cDisabled)
 {
  el.cToggle=true;
  
  if(el.value==null)
   el.value=0;
  
  if(el.onclick!=null)
   el.cToggle_οnclick=el.onclick;
  else
   el.cToggle_οnclick="";

  el.οnclick=new Function("toggle("+el.id+");"+el.id+".cToggle_onclick();");
 }
}

function removeToggle(el)
{
 var cDisabled=el.cDisabled;
 
 cDisabled=(cDisabled!=null);
 
 var cToggle=el.cToggle;
 
 cToggle=(cToggle!=null);
 
 if(cToggle&&!cDisabled)
 {
  el.cToggle=null;

  if(el.value)
  {
   toggle(el);
  }

  ItemFlat(el);
  
  if(el.cToggle_onclick!=null)
  {
   el.οnclick=el.cToggle_onclick;
   el.cToggle_οnclick=null;
  }
 }
}

function toggle(el)
{
 el.value=!el.value;
 
 if(el.value)
  el.style.background="URL(/images/tileback.gif)";
 else
  el.style.backgroundImage="";

 //doOut(el);
}

function ItemFlat(el)
{
 with(el.style)
 {
  background="";
  border="1px solid buttonface";
  padding="1px";
 }
}

function ItemRaised(el)
{
 with(el.style)
 {
  borderLeft="1px solid buttonhighlight";
  borderRight="1px solid buttonshadow";
  borderTop="1px solid buttonhighlight";
  borderBottom="1px solid buttonshadow";
  padding="1px";
 }
}

function ItemPressed(el)
{
 with(el.style)
 {
  borderLeft="1px solid buttonshadow";
  borderRight="1px solid buttonhighlight";
  borderTop="1px solid buttonshadow";
  borderBottom="1px solid buttonhighlight";
  paddingTop="2px";
  paddingLeft="2px";
  paddingBottom="0px";
  paddingRight="0px";
 }
}

function ItemGray(el,b)
{
 var filtval;
 
 if(b)
  filtval="gray()";
 else
  filtval="";

 var imgs=findChildren(el,"tagName","IMG");
  
 for(var i=0;i<imgs.length;i++)
 {
  imgs[i].style.filter=filtval;
 }

}
</script>
<style>
Body{font-size: 9pt}Td{font-size: 9pt}
.MenuBar{background: buttonface;border-top: 1px solid buttonhighlight; border-left: 1px solid buttonhighlight; border-bottom: 1px solid buttonshadow; border-right: 1px solid buttonshadow; padding: 2px; font: menu;}
.MenuButton{border: 1px solid buttonface; padding: 1px; text-align: center; cursor: default;}");
.MenuButton IMG{filter: gray();}
</style>

<table class="MenuBar">
  <tr>
    <td>
      <table class="MenuBar">
        <tr>
          <td class="MenuButton" οnclick="#">拟制</td>
          <td class="MenuButton" οnclick="#">取消</td>
          <td class="MenuButton" οnclick="#">存盘</td>
          <td class="MenuButton" οnclick="#">编辑</td>
          <td class="MenuButton" οnclick="#">删除</td>
          <td class="MenuButton" οnclick="#">打开</td>
          <td class="MenuButton" οnclick="#">打印</td>
        </tr>
      </table>
    </td>
  </tr>
</table>