洪恩在线 - Javascript实例

当前位置：洪恩在线 -> 电脑乐园 -> JavaScript实例

　　　　　变颜色的菜单

效果演示：

　　　　　　　　　

电脑乐园

轻松英语

继续教育

同窗名录

动感校园

　　

源代码如下：

这段程序放在<body>与</body>之间

<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>

源程序讲解：

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);">	当鼠标移到链接上时，执行openme()函数，即背景色变为#FFFFCC色，当鼠标离开链接时，执行closeme()函数，即背景色变为#99FFFF色。
<a href="http://www.hongen.com/pc/ index.htm"> <strong>电脑乐园</strong></a></td>	菜单上的链接。