![]() |
|
如何制作鼠标感应动画菜单
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
广告招租,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的语句改为你的图片的宽和高。
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||