设为首页   加入最爱           最新更新:全方位英文文章资料库
 
资料坊搜索: 标题 全文     
如何制作鼠标感应动画菜单
   首页>>YesizeCOM>>电脑技能坊>>Javascript>>正文       
 
广告招租,e-mail:yesize@hotmail.com

广告招租,e-mail:yesize@hotmail.com

  许多网友问:鼠标移上去会变亮的菜单是怎么制作的?其实这是用两张图片交替显示的效果,具体采用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的语句改为你的图片的宽和高。
 

上一篇:强制输出变数 下一篇:javascript技巧--如何制作移动的浮动层

版权说明:作品来源于网上,版权归作者所有,如果无意中侵犯了您的版权,请来信告知,本站将在3个工作日内删除。yesize@hotmail.com
  热门小游戏分类 
射击小游戏 连连看小游戏
台球小游戏 成人小游戏
CS小游戏 化妆小游戏
赛车小游戏 休闲小游戏
篮球小游戏 换装小游戏
儿童小游戏 牛牛小游戏
麻将小游戏 冒险小游戏
美媚小游戏 益智小游戏
体育小游戏  
Society Recreation & Sports
Travel & Leisure Communications
Vehicles Computers
Fashion Arts & Entertainment
Reference & Education Disease & Illness
Writing & Speaking Politics
Product Reviews Food & Beverage
Finance Internet Business
Self Improvement Home & Family
Health & Fitness Business
最新更新内容
警惕“公务员报考热”背
公务员考试不是丈母娘考
一名新公务员的自白:我
公务员考脑筋急转弯与挂
北努斗:2006行政能力测
大讨论:06行测BT题目大
过来人回忆:当年,我也
一家之言:公务员热折射
公务员考试申论要是有正
数十万大学生走进公务员
      粤ICP备05005424         Copyright ©2000 - 2004 Yesize.COM