[转自横渡博客]XP菜单效果

< html >
     < head >
         < title ></ title >
         < meta name = " GENERATOR "  content = " Microsoft Visual Studio .NET 7.1 " >
         < meta name = " vs_targetSchema "  content = " http://schemas.microsoft.com/intellisense/ie5 " >
            <!-- 定义默认的style值 -->
         < style >
            .menu td
            {
                font - size:12px;
                font - family:verdana,arial;
                font - weight:bolder;
                color:#ffffff;
                border:1px solid # 336699 ;
                background:# 336699 ;
                filter:blendtrans(duration = 0.5 );
                cursor:hand;
                text - align:center;
            }
         </ style >
         < script language = " javascript " >
             function  Menu(objid)
            {
                 var  tds = objid.getElementsByTagName('td');        //定义个对像。该对像所指为Table内的所有td。
                 for ( var  i = 0 ;i < tds.length;i ++ )         //迭代出所有td
                {
                     with (tds[i])
                    {
                        onmouseover = function ()              //鼠标移入时
                        {
                             with ( this )
                            {
                                filters[ 0 ].apply();            //虑镜
                                style.background = '#66CCFF';           //背景色
                                style.border = '1px solid #ffffff';          //边框style
                                style.color = 'black';             //字体色
                                filters[ 0 ].play();
                            }
                        }
                        onmouseout = function ()        //鼠标移出时
                        {
                             with ( this )
                            {
                                filters[ 0 ].apply(); 
                                style.background = '# 336699 ';              //背景色
                                style.border = '1px solid # 336699 ';           //边框style
                                style.color = '#ffffff';           //字体色
                                filters[ 0 ].play();
                            }
                        }
                    }
                }
            }
         </ script >
     </ head >
     < body >
         < table class = " menu "  id = " TestMenu "  width = " 400 "  cellpadding = " 1 "  cellspacing = " 2 "  border = " 0 "
            bgcolor = " #336699 "  align = " center " >
             < tr >
                 < td > HD </ td >
                 < td > HD </ td >
                 < td > HD </ td >
                 < td > HD </ td >
             </ tr >
             < tr >
                 < td > HD </ td >
                 < td > HD </ td >
                 < td > HD </ td >
                 < td > HD </ td >
             </ tr >
             < tr >
                 < td > HD </ td >
                 < td > HD </ td >
                 < td > HD </ td >
                 < td > HD </ td >
             </ tr >
             < tr >
                 < td > HD </ td >
                 < td > HD </ td >
                 < td > HD </ td >
                 < td > HD </ td >
             </ tr >
         </ table >  
            <!-- 函数调用，参数TestMenu为Table的ID值！ -->
         < script > Menu(TestMenu); </ script >
     </ body >
</ html >

转载于:https://www.cnblogs.com/Elong/archive/2005/04/17/139220.html