如何製作滑鼠感應動畫菜單
來源:互聯網
上載者:User
菜單|感應|滑鼠 許多網友問:滑鼠移上去會變亮的菜單是怎麼製作的?其實這是用兩張圖片交替顯示的效果,具體採用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="http://www.webjx.com/htmldata/images/2.gif";
button001=new Image(); button001.src="http://www.webjx.com/htmldata/images/21.gif";
button01=new Image(); button01.src="http://www.webjx.com/htmldata/images/3.gif";
button011=new Image(); button011.src="http://www.webjx.com/htmldata/images/31.gif";
button02=new Image(); button02.src="http://www.webjx.com/htmldata/images/4.gif";
button021=new Image(); button021.src="http://www.webjx.com/htmldata/images/41.gif";
button03=new Image(); button03.src="http://www.webjx.com/htmldata/images/5.gif";
button031=new Image(); button031.src="http://www.webjx.com/htmldata/images/51.gif";
button04=new Image(); button04.src="http://www.webjx.com/htmldata/images/6.gif";
button041=new Image(); button041.src="http://www.webjx.com/htmldata/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>
只可以將其中類似“http://www.webjx.com/htmldata/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" ><img src="http://www.webjx.com/htmldata/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" ><img src="http://www.webjx.com/htmldata/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" ><img src="http://www.webjx.com/htmldata/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" ><img src="http://www.webjx.com/htmldata/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" ><img src="http://www.webjx.com/htmldata/images/6.gif" name="button04" alt="Homepage技巧" border="0" WIDTH="130" HEIGHT="25"></a></td>
</tr>
</table>
將其中類似<a href="../frontpage.htm>的語句改為你需要連結的檔案名稱;類似img src="http://www.webjx.com/htmldata/images/6.gif"的語句改為你的圖片名和路徑名;類似WIDTH="130" HEIGHT="25"的語句改為你的圖片的寬和高。