120、有立体感的文字链接

120、有立体感的文字链接

脚本说明:

把如下代码加入<body>区域中

<style>

td{cursor:hand;font-size:12px}

.click{border-top:1px solid #0033CC;border-bottom:1px solid #DDEEFF;border-left:1px solid #0033CC;border-right:1px solid #DDEEFF;padding-top:5px;padding-bottom:3px;padding-left:5px;padding-right:3px;}

.hover{border-top:1px solid #DDEEFF;border-bottom:1px solid #0033CC;border-left:1px solid #DDEEFF;border-right:1px solid #0033CC;padding:4px;}

.normal{border:1px solid #FFFFFF;padding:4px;}

</style>

<script>

function overbutton(){

       if(src=event.srcElement)

              if(src.className=="normal"){

                     src.className='hover';

              }

}

function outbutton(){

       if(src=event.srcElement)

              if(src.className=="hover"){

                     src.className='normal';

              }

}

function clickbutton(){

       if(src=event.srcElement)

              if(src.className=="hover"){

                  var cells=document.all.button.rows[0].cells;

                     for (i=0;i<cells.length ;i++ )

                     {cells[i].className="normal";

                     }

                     src.className='click';

              }

}

 

document.onmouseover=overbutton

document.onmouseout=outbutton

document.onclick=clickbutton</script>

<TABLE id=button>

<TR>

       <TD class=click><a href=http://www.7stk.com>日报</a></TD>

       <TD class=normal>周报</TD>

       <TD class=normal>月报</TD>

       <TD class=normal>季报</TD>

</TR>

</TABLE>

 

Write a comment

Comments: 0