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

最新推荐文章于 2025-05-29 23:33:41 发布

wisdosoft

最新推荐文章于 2025-05-29 23:33:41 发布

阅读量633

点赞数

文章标签： button image javascript border function browser

许多网友来信问：你首页上，鼠标移上去会变亮的菜单是怎么制作的？其实这是用两张图片交替显示的效果，具体采用javascript脚本语言实现。本应该放在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>之间：