凸起的按钮效果 - 站长资源库


答案：<script language=javascript>  
function movr(src)  
{    src.onselectstart = new Function("return false");  
with (src.style) {  
        color="red"  
borderLeft  = "1px solid buttonhighlight";  
borderRight = "1px solid buttonshadow";  
borderTop  = "1px solid buttonhighlight";  
borderBottom = "1px solid buttonshadow";  
padding   = "0";  
cursor="hand"; 
}  
}  
function mdwn(src)  
{    src.onselectstart = new Function("return false");  
with (src.style) {  
        color="red"  
borderRight  = "1px solid buttonhighlight";  
borderLeft= "1px solid buttonshadow";  
borderBottom  = "1px solid buttonhighlight";  
borderTop = "1px solid buttonshadow";  
padding   = "0";  
}  
}  
function mout(src)  
{    src.onselectstart = new Function("return false");  
with (src.style) {  
        color="black"  
background = "buttonface"; //此为鼠标移动后的颜色，可根据需要改变 
border = "1px solid buttonface";  
padding   = "0";  
}  
}  
</script> 



<table width=100 bgcolor=buttonface>  
<tr>  
<td width=100% name="cool" bgcolor=buttonface onmouseover='movr(this)' onmouseout='mout(this)' onmouseup='movr(this)' onmousedown='mdwn(this)'>  
button  
</td>  
<td width=100% bgcolor=buttonface onmouseover='movr(this)' onmouseout='mout(this)' onmouseup='movr(this)' onmousedown='mdwn(this)'>  
button  
</td>  
<td width=100% bgcolor=buttonface onmouseover='movr(this)' onmouseout='mout(this)' onmouseup='movr(this)' onmousedown='mdwn(this)'>  
button  
</td>  
<td width=100% bgcolor=buttonface onmouseover='movr(this)' onmouseout='mout(this)' onmouseup='movr(this)' onmousedown='mdwn(this)'>  
button  
</td>  
</tr>  
</table> 
  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]


<style> 

body{background: #DDD;} 
table 
{ 
  width: 450px;height:75; 
  background: #CCC;filter:progid:DXImagetransform.microsoft.shadow(strength=10,direction=135,color=#666666); 
} 
td{text-align: center;} 
td a{ 
    width: 100px; 
    30px; 
    text-align: center; 
    border-top: 2px solid #FFF; 
    border-bottom: 2px solid #333; 
    text-decoration: none;padding:3px; 
} 
td a:hover{ 
    background: #DDD;font-family:华文行楷;padding:5px; 
} 
td a:active 
{ 
    padding:7px; 
    color: #ED1C24; 
    font-weight: bold; 
} 
</style> 

<table  border="0" align="center"> 
<tr> 
<td>金翅擘海</td><td><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></B></td><td>独来读网</td><td>野火寒烟</td> 
</tr> 
<tr> 
<td>萧萧小雨</td><td>湖面无舟</td><td>孤零飘客</td><td>天牙海脚</td> 
</tr> 
</table>
  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]


<body style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=blue,endColorStr=white);"> 
<script language=javascript>  
function movr(src)  
{    src.onselectstart = new Function("return false");  
with (src.style) {  
        color="red"  
borderLeft  = "2px solid buttonhighlight";  
borderRight = "2px solid buttonshadow";  
borderTop  = "2px solid buttonhighlight";  
borderBottom = "2px solid buttonshadow";  
padding   = "0";  
cursor="hand"; 
}  
}  
function mdwn(src)  
{    src.onselectstart = new Function("return false");  
with (src.style) {  
        color="red"  
borderRight  = "1px solid buttonhighlight";  
borderLeft= "1px solid buttonshadow";  
borderBottom  = "1px solid buttonhighlight";  
borderTop = "1px solid buttonshadow";  
padding   = "0";  
}  
}  
function mout(src)  
{    src.onselectstart = new Function("return false");  
with (src.style) {  
        color="black"  
background = "buttonface"; //此为鼠标移动后的颜色，可根据需要改变 
border = "1px solid buttonface";  
padding   = "0";  
}  
}  
</script> 



<table width=60 cellspacing="16" bgcolor=buttonface style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=blue,endColorStr=white);">  
<tr>  
<td width=100% name="cool" bgcolor=buttonface onmouseover='movr(this)' onmouseout='mout(this)' onmouseup='movr(this)' onmousedown='mdwn(this)'>  
<Font Size=4 Face="微软简行楷"><Font Color="#FF0080">鹤</Font><Font Color="#AA55AA">发</Font><Font Color="#55AAD4">童</Font><Font Color="gold">颜</Font></Font> 
</td>  
<td width=100% bgcolor=buttonface onmouseover='movr(this)' onmouseout='mout(this)' onmouseup='movr(this)' onmousedown='mdwn(this)'>  
<Font Size=4 Face="微软简行楷"><Font Color="#FF00FF">青</Font><Font Color="#0080FF">梅</Font><Font Color="#55C000">竹</Font><Font Color="#FF0000">马</Font></Font> 
</td>  
<td width=100% bgcolor=buttonface onmouseover='movr(this)' onmouseout='mout(this)' onmouseup='movr(this)' onmousedown='mdwn(this)'>  
<b><font color="#FF0000">知</font><font color="#55C000">往</font><font color="#0080FF">观</font><font color="#FF00FF">来</font></b> 
</td>  
<td width=100% bgcolor=buttonface onmouseover='movr(this)' onmouseout='mout(this)' onmouseup='movr(this)' onmousedown='mdwn(this)'>  
<B><font color="Red">金</font></B><B><font color="green">翅</font></B><B><font color="orange">擘</font></B><B><font color="blue">海</font></B>
<B> 
</td>  
</tr>  
</table> 
  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
上一个：使用有趣的自定义标记布局页面
下一个：以图换字的几个方法及思路
更多图片编程知识: