如有一排的按钮或图片按钮,点击其中之一使其下陷或变换,而其它正常,要怎么做???

Question

做两张图片，一张未下陷，一张下陷。
再用dw的rollover做~

Answer 1

做两幅图片一个正常一个下陷，onMouseOver来切换

Answer 2

<script src="MenuButton.js"></script><style>Body{font-size: 9pt}Td{font-size: 9pt}</style><table class="MenuBar" width="100%"><tr>
<td><table class="MenuBar"><tr><td class="MenuButton" onclick="#">拟制</td>
<td class="MenuButton" onclick="#">取消</td><td class="MenuButton" onclick="#">存盘</td>
<td class="MenuButton" onclick="#">编辑</td><td class="MenuButton" onclick="#">删除</td>
<td class="MenuButton" onclick="#">打开</td><td class="MenuButton" onclick="#">打印</td>
</tr></table></td></tr></table>

Answer 3

MenuButton.js
document.onmouseover=doOver;
document.onmouseout=doOut;
document.onmousedown=doDown;
document.onmouseup=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_onclick=el.onclick;
el.onclick=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.onclick=el.cDisabled_onclick;
el.cDisabled_onclick=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_onclick=el.onclick;
else
el.cToggle_onclick=""; el.onclick=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.onclick=el.cToggle_onclick;
el.cToggle_onclick=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;
}}
document.write("<style>");
document.write(".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;}");
document.write(".MenuButton{border: 1px solid buttonface; padding: 1px; text-align: center; cursor: default;}");
document.write(".MenuButton IMG{filter: gray();}");
document.write("</style>");

Answer 4

什么错误啊,我这儿都好用
<script>
document.onmouseover=doOver;
document.onmouseout=doOut;
document.onmousedown=doDown;
document.onmouseup=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_onclick=el.onclick;
el.onclick=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.onclick=el.cDisabled_onclick;
el.cDisabled_onclick=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_onclick=el.onclick;
else
el.cToggle_onclick=""; el.onclick=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.onclick=el.cToggle_onclick;
el.cToggle_onclick=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" onclick="#">拟制</td>
          <td class="MenuButton" onclick="#">取消</td>
          <td class="MenuButton" onclick="#">存盘</td>
          <td class="MenuButton" onclick="#">编辑</td>
          <td class="MenuButton" onclick="#">删除</td>
          <td class="MenuButton" onclick="#">打开</td>
          <td class="MenuButton" onclick="#">打印</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 5

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<SCRIPT language="javascript">
function chan(oObj)
{
    var arrObj = document.getElementsByName("n");
    for(var i=0; i<arrObj.length; i++)
        arrObj[i].src = arrObj[i].preSrc;
    oObj.src = "4.gif";
}
function init()
{
    var arrObj = document.getElementsByName("n");
    for(var i=0; i<arrObj.length; i++)
         arrObj[i].preSrc = arrObj[i].src;
}
</SCRIPT>
</HEAD><BODY onLoad="init()">
<INPUT type = "image" src = "1.gif" name = "n" onClick="chan(this)">
<INPUT type = "image" src = "2.gif" name = "n" onClick="chan(this)">
<INPUT type = "image" src = "3.gif" name = "n" onClick="chan(this)">
</BODY>
</HTML>