如何製作滑鼠感應動畫菜單

來源:互聯網
上載者: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"的語句改為你的圖片的寬和高。

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。