📄 变颜色的菜单.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0065)http://www.hongen.com/pc/homepage/javascript/sample/colormenu.htm -->
<HTML><HEAD><TITLE>洪恩在线 - Javascript实例</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312"><LINK
href="变颜色的菜单.files/home.css" rel=stylesheet>
<META content=电脑乐园,电脑,乐园,交互教程,交互,教程,教育,javascript,javascript实例,网页制作
name=keywords><LINK href="变颜色的菜单.files/homepage.css" rel=stylesheet>
<META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff>
<SCRIPT language=Javascript src="变颜色的菜单.files/head.js"></SCRIPT>
<TABLE height=20 cellSpacing=0 cellPadding=0 width=760 align=center border=0>
<TBODY>
<TR bgColor=#cfdfff>
<TD class=p1 align=left height=20><IMG height=8
src="变颜色的菜单.files/blank.gif" width=12><FONT color=#000000><FONT
color=#ff9966>当前位置</FONT>：<A class=under
href="http://www.hongen.com/default.htm">洪恩在线</A> -> <A class=under
href="http://www.hongen.com/pc/index.htm">电脑乐园</A> ->
JavaScript实例</FONT></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=760 align=center border=0>
<TBODY>
<TR>
<TD vAlign=top width=207><IMG height=13 src="变颜色的菜单.files/bule.gif"
width=207></TD>
<TD width=1 bgColor=#a8a8ab><IMG height=1
src="E:\杨勇\Web程序设计课件\Javascript实例\变颜色的菜单.files\blank(1).gif" width=1></TD>
<TD align=right width=530 height=22><IMG height=20
src="变颜色的菜单.files/js.gif" width=186></TD>
<TD width=22><IMG height=1
src="E:\杨勇\Web程序设计课件\Javascript实例\变颜色的菜单.files\blank(1).gif"
width=1></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=760 align=center border=0>
<TBODY>
<TR>
<TD width=124><IMG height=1
src="E:\杨勇\Web程序设计课件\Javascript实例\变颜色的菜单.files\blank(1).gif" width=1></TD>
<TD width=636 background=变颜色的菜单.files/line.gif height=27><IMG height=1
src="E:\杨勇\Web程序设计课件\Javascript实例\变颜色的菜单.files\blank(1).gif"
width=1></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=760 align=center border=0>
<TBODY>
<TR>
<TD class=p3 align=middle width=711><B> 变颜色的菜单</B></TD>
<TD width=1 bgColor=#a8a8ab><IMG height=1
src="E:\杨勇\Web程序设计课件\Javascript实例\变颜色的菜单.files\blank(1).gif" width=1></TD>
<TD class=p2 width=48><IMG height=1
src="E:\杨勇\Web程序设计课件\Javascript实例\变颜色的菜单.files\blank(1).gif"
width=1></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=760 align=center border=0>
<TBODY>
<TR>
<TD vAlign=top align=middle> </TD>
<TD> </TD>
<TD align=middle width=28 bgColor=#5f74bf><IMG height=49
src="变颜色的菜单.files/bule1.gif" width=28></TD>
<TD align=middle width=37> </TD></TR>
<TR>
<TD vAlign=top align=middle>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR align=middle>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=110 border=0>
<TBODY>
<TR align=middle bgColor=#5f74bf>
<TD class=p1 align=right><B><FONT color=#ffffff>效 果 演
示</FONT></B><FONT color=#ffffff>：</FONT></TD>
<TD class=p1 width=11><IMG height=18
src="变颜色的菜单.files/bule2.gif"
width=11></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>
<TD>
<SCRIPT language=JavaScript>function openme(object){object.style.background="#FFFFCC";}function closeme(object){object.style.background="#99FFFF";}</SCRIPT>
<TABLE class=p2 cellSpacing=2 cellPadding=2 width="30%" bgColor=#99ffff
border=1>
<TBODY>
<TR>
<TD onmouseover=openme(this); onmouseout=closeme(this); align=middle
width="15%"><A
href="http://www.hongen.com/pc/index.htm"><STRONG>电脑乐园</STRONG></A></TD>
<TR>
<TD onmouseover=openme(this); onmouseout=closeme(this); align=middle
width="15%"><A
href="http://www.hongen.com/eng/index.htm"><STRONG>轻松英语</STRONG></A></TD></TR>
<TR>
<TD onmouseover=openme(this); onmouseout=closeme(this); align=middle
width="15%"><A
href="http://www.hongen.com/proedu/index.htm"><STRONG>继续教育</STRONG></A></TD></TR>
<TR>
<TD onmouseover=openme(this); onmouseout=closeme(this); align=middle
width="15%"><A
href="http://www.hongen.com/album/index.htm"><STRONG>同窗名录</STRONG></A></TD></TR>
<TR>
<TD onmouseover=openme(this); onmouseout=closeme(this); align=middle
width="15%"><A
href="http://www.hongen.com/edu/index.htm"><STRONG>动感校园</STRONG></A></TD></TR></TBODY></TABLE> <BR></TD>
<TD align=middle width=28 bgColor=#5f74bf> </TD>
<TD align=middle width=37> </TD></TR>
<TR>
<TD vAlign=top align=middle>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD height=30> </TD></TR>
<TR align=middle>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=110 border=0>
<TBODY>
<TR align=middle bgColor=#5f74bf>
<TD class=p1 align=right><B><FONT
color=#ffffff>源代码如下</FONT></B><FONT color=#ffffff>：</FONT></TD>
<TD class=p1 width=11><IMG height=18
src="变颜色的菜单.files/bule2.gif"
width=11></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>
<TD class=p2 vAlign=top width=457><B><BR><BR></B><SPAN class=p1><FONT
color=#6633ff><BR>这段程序放在<body>与</body>之间</FONT></SPAN><BR>
<FORM><TEXTAREA onmouseover=this.focus() style="BACKGROUND-COLOR: #d5e9fd" onfocus=this.select() name=textarea rows=12 wrap=VIRTUAL cols=50><script language="JavaScript">
function openme(object){
object.style.background="#FFFFCC";}
function closeme(object){
object.style.background="#99FFFF";}
</script>
<table border="1" cellspacing="2" width="30%" bgcolor="#99FFFF" cellpadding="2" class=p2>
<tr>
<td align="center" width="15%" onMouseOver="openme(this);" onMouseOut="closeme(this);"><a
href="http://www.hongen.com/pc/index.htm"><strong>电脑乐园</strong></a></td>
<tr>
<td align="center" width="15%" onMouseOver="openme(this);" onMouseOut="closeme(this);"><a
href="http://www.hongen.com/eng/index.htm" ><strong>轻松英语</strong></a></td>
</tr>
<tr>
<td align="center" width="15%" onMouseOver="openme(this);" onMouseOut="closeme(this);"><a
href="http://www.hongen.com/proedu/index.htm" ><strong>继续教育</strong></a></td>
</tr>
<tr>
<td align="center" width="15%" onMouseOver="openme(this);" onMouseOut="closeme(this);"><a
href="http://www.hongen.com/album/index.htm"><strong>同窗名录</strong></a></td>
</tr>
<tr>
<td align="center" width="15%" onMouseOver="openme(this);" onMouseOut="closeme(this);"><a
href="http://www.hongen.com/edu/index.htm"><strong>动感校园</strong></a></td>
</tr>
</table></TEXTAREA> </FORM><BR></TD>
<TD align=middle width=28 bgColor=#5f74bf> </TD>
<TD align=middle width=37> </TD></TR>
<TR>
<TD vAlign=bottom align=middle>
<TABLE cellSpacing=0 cellPadding=0 width=238 border=0>
<TBODY>
<TR align=middle>
<TD>
<TABLE class=p2 cellSpacing=0 cellPadding=0 width=110 border=0>
<TBODY>
<TR align=middle bgColor=#5f74bf>
<TD class=p1 align=right><B><FONT
color=#ffffff>源程序讲解：</FONT></B></TD>
<TD class=p1 width=11><IMG height=18
src="变颜色的菜单.files/bule2.gif"
width=11></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>
<TD class=p2 vAlign=top width=457> </TD>
<TD align=middle width=28 bgColor=#5f74bf><IMG height=49
src="变颜色的菜单.files/bule1.gif" width=28></TD>
<TD align=middle width=37> </TD></TR></TBODY></TABLE>
<TABLE class=p2 cellSpacing=0 cellPadding=0 width=760 align=center border=0>
<TBODY>
<TR>
<TD class=p2 align=right width=693><BR>
<TABLE cellSpacing=0 cellPadding=0 width=650 border=0>
<TBODY>
<TR>
<TD>
<TABLE class=p2 cellSpacing=1 borderColorDark=#666666 cellPadding=1
width="100%" borderColorLight=#666666 border=1>
<TBODY>
<TR>
<TD width=337>function openme(object)<BR>{
object.style.background="#FFFFCC";}<BR>function
closeme(object)<BR>{ object.style.background="#99FFFF";}
<BR></script><BR></TD>
<TD width=298>定义两个函数。功能是定义当前对象的背景色。</TD></TR>
<TR bgColor=#cfdfff>
<TD width=337><table border="1" cellspacing="2" width="30%"
bgcolor="#99FFFF" cellpadding="2" class=p2> <BR></TD>
<TD width=298>以下都是定义页面菜单的内容。</TD></TR>
<TR>
<TD width=337><tr> <td align="center" width="15%"
onMouseOver="openme(this);"
<BR>onMouseOut="closeme(this);"><BR><BR></TD>
<TD
width=298>当鼠标移到链接上时，执行openme()函数，即背景色变为#FFFFCC色，当鼠标离开链接时，执行closeme()函数，即背景色变为#99FFFF色。</TD></TR>
<TR bgColor=#cfdfff>
<TD width=337><a
href="http://www.hongen.com/pc/<BR>index.htm"><BR><strong>电脑乐园</strong></a></td>
<BR></TD>
<TD
width=298>菜单上的链接。</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR><BR></TD>
<TD class=p2 width=18> </TD>
<TD class=p2 width=1 bgColor=#a8a8ab><IMG height=1
src="E:\杨勇\Web程序设计课件\Javascript实例\变颜色的菜单.files\blank(1).gif" width=1></TD>
<TD class=p2 width=48> </TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=760 align=center border=0>
<TBODY>
<TR bgColor=#5f74bf>
<TD> </TD></TR></TBODY></TABLE>
<P> </P></BODY></HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -