当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 用DHTML做的一个菜单特效

HTML/XHTML教程
W3C教程(9):W3C XPath 活动
W3C教程(10):W3C XQuery 活动
W3C教程(8):W3C XML Schema 活动
W3C教程(5):W3C XML 活动
W3C教程(7):W3C XSL 活动
W3C教程(4):W3C XHTML 活动
W3C教程(3):W3C HTML 活动
W3C教程(2):W3C 程序
W3C教程(6):W3C CSS 活动
W3C教程(1):认识W3C
XHTML CSS网站设计的优势和问题
英文:A链接标记ie下会自动补全href
如何通过W3C验证?
XHTML标签在CSS中对应的属性及用法
网页前端开发CSS相关团队协作
网页制作初学者:学用HTML的超链接A标记
UTF-8和GB2312网页编码
让访客记住网站的三段实用代码
网易博客中用到的简单网页代码
HTML教程:title属性与alt属性

HTML/XHTML教程 中的 用DHTML做的一个菜单特效


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 72 ::
收藏到网摘: n/a

源码:
<!--样式表部分-->
<style type=text/css>
.menu td{font-size:12px;color:white;font-weight:bold;background:#336699;border:1px solid #336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center}
</style>

<!--脚本定义部分-->
<script language=javascript type=text/javascript>
function showFilter(obj){
var tds=obj.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
with(tds[i]){
  onmouseover=function(){
  with(this){
  filters[0].apply();
  style.color='black';
  style.border='1px solid white';
  style.background='#66CCFF';
  filters[0].play();
  }
  }
  onmouseout=function(){
  with(this){
  filters[0].apply();
  style.color='white';
  style.border='1px solid #336699';
  style.background='#336699';
  filters[0].play();
  }
  }
}
}
}
</script>

<!--BODY部分-->
<table cellspacing=4 cellpadding=1 bgColor=#336699 border=0 class=menu width=100 id=xmenu>
<tr><td>0128论坛</td></tr>
<tr><td>例子二</td></tr>
<tr><td>例子三</td></tr>
<tr><td>例子四</td></tr>
<tr><td>例子五</td></tr>
<tr><td>例子六</td></tr>
</table>
<script>showFilter(xmenu); //里面就的xmenu就是表格的ID号此函数可到处调用</script>