阅读内容 

如何制作鼠标感应动画菜单

[日期:2005-12-23] 来源:不详  作者:佚名 [字体: ]
  许多网友问:鼠标移上去会变亮的菜单是怎么制作的?其实这是用两张图片交替显示的效果,具体采用javascript脚本语言实现。因为稍微复杂些,需要细细讲解。
  你要制作这种效果的话,首先也要制作好同样大小,不同效果的两张图片(先作好一张,再复制出另一张,再作其他效果,这样可以保证图片完全吻合)。
  然后将下面的javascript代码加入到HTML的<head></head>之间
  <script language="javascript">
// Author: Alone ^_^;
// Date: 08.26.98
// Hide from non-javascript compatible browser
j=document.images;

if (j)

{
button00=new Image(); button00.src="../images/2.gif";
button001=new Image(); button001.src="../images/21.gif";
button01=new Image(); button01.src="../images/3.gif";
button011=new Image(); button011.src="../images/31.gif";
button02=new Image(); button02.src="../images/4.gif";
button021=new Image(); button021.src="../images/41.gif";
button03=new Image(); button03.src="../images/5.gif";
button031=new Image(); button031.src="../images/51.gif";
button04=new Image(); button04.src="../images/6.gif";
button041=new Image(); button041.src="../images/61.gif";
}

function img_act(p)
{if (j) {on = eval (p + "1.src");
document[p].src = on;}
}

function img_inact(p)
{if (j) {off = eval (p + ".src");
document[p].src = off;
}
}
// --></script>

  只可以将其中类似“../images/2.gif” 的语句修改为你的图片名和路径名,其他不要改动。再将下面的代码放入<body></body>之间:
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" bgcolor="#000000"><p align="center"><a href="../../../FrontPage.htm" onmouseover="img_act('button00')" onmouseout="img_inact('button00')"><img src="../../../images/2.gif" name="button00" alt="Frontpage宝典" border="0" WIDTH="130" HEIGHT="25"></a></td>
</tr>
<tr>
<td width="100%" bgcolor="#000000"><p align="center"><a href="../../../Photoshop.htm" onmouseover="img_act('button01')" onmouseout="img_inact('button01')"><img src="../../../images/3.gif" alt="Photoshop点睛" name="button01" border="0" WIDTH="130" HEIGHT="25"></a></td>
</tr>
<tr>
<td width="100%" bgcolor="#000000"><p align="center"><a href="../../../javas.htm" onmouseover="img_act('button02')" onmouseout="img_inact('button02')"><img src="../../../images/4.gif" name="button02" alt="javascript超市" border="0" WIDTH="130" HEIGHT="25"></a></td>
</tr>
<tr>
<td width="100%" bgcolor="#000000"><p align="center"><a href="../../../CGI.htm" onmouseover="img_act('button03')" onmouseout="img_inact('button03')"><img src="../../../images/5.gif" name="button03" alt="CGI&perl天书" border="0" WIDTH="130" HEIGHT="25"></a></td>
</tr>
<tr>
<td width="100%" bgcolor="#000000"><p align="center"><a href="../../../homepage.htm" onmouseover="img_act('button04')" onmouseout="img_inact('button04')"><img src="../../../images/6.gif" name="button04" alt="Homepage技巧" border="0" WIDTH="130" HEIGHT="25"></a></td>
</tr>
</table>

  将其中类似<a href=../../"../FrontPage.htm>的语句改为你需要链接的文件名;类似img src="../images/6.gif"的语句改为你的图片名和路径名;类似WIDTH="130" HEIGHT="25"的语句改为你的图片的宽和高。
阅读:
录入:

推荐 】 【 打印
相关新闻      
本文评论       全部评论
发表评论
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款


点评: 字数
姓名:
Advertisement
内容查询


Advertisement