許多網友問
鼠標移上去會變亮的菜單是怎麼制作的?其實這是用兩張圖片交替顯示的效果
具體采用javascript腳本語言實現
因為稍微復雜些
需要細細講解
你要制作這種效果的話
首先也要制作好同樣大小
不同效果的兩張圖片(先作好一張
再復制出另一張
再作其他效果
這樣可以保證圖片完全吻合)
然後將下面的Javascript代碼加入到HTML的<head></head>之間
<script language=
JavaScript
>
// Author: Alone ^_^;
// Date:
// Hide from non
javascript compatible browser
j=document
images;
if (j)
{
button
=new Image(); button
src=
/images/
gif
;
button
=new Image(); button
src=
/images/
gif
;
button
=new Image(); button
src=
/images/
gif
;
button
=new Image(); button
src=
/images/
gif
;
button
=new Image(); button
src=
/images/
gif
;
button
=new Image(); button
src=
/images/
gif
;
button
=new Image(); button
src=
/images/
gif
;
button
=new Image(); button
src=
/images/
gif
;
button
=new Image(); button
src=
/images/
gif
;
button
=new Image(); button
src=
/images/
gif
;
}
function img_act(p)
{if (j) {on = eval (p +
src
);
document[p]
src = on;}
}
function img_inact(p)
{if (j) {off = eval (p +
src
);
document[p]
src = off;
}
}
//
></script>
只可以將其中類似
/images/
gif
的語句修改為你的圖片名和路徑名
其他不要改動
再將下面的代碼放入<body></body>之間
<table border=
width=
%
cellspacing=
cellpadding=
>
<tr>
<td width=
%
bgcolor=
#
><p align=
center
><a onmouseover=
img_act(
button
)
onmouseout=
img_inact(
button
)
><img src=
/images/
gif
name=
button
alt=
Frontpage寶典
border=
WIDTH=
HEIGHT=
></a></td>
</tr>
<tr>
<td width=
%
bgcolor=
#
><p align=
center
><a onmouseover=
img_act(
button
)
onmouseout=
img_inact(
button
)
><img src=
/images/
gif
alt=
Photoshop點睛
name=
button
border=
WIDTH=
HEIGHT=
></a></td>
</tr>
<tr>
<td width=
%
bgcolor=
#
><p align=
center
><a onmouseover=
img_act(
button
)
onmouseout=
img_inact(
button
)
><img src=
/images/
gif
name=
button
alt=
javascript超市
border=
WIDTH=
HEIGHT=
></a></td>
</tr>
<tr>
<td width=
%
bgcolor=
#
><p align=
center
><a onmouseover=
img_act(
button
)
onmouseout=
img_inact(
button
)
><img src=
/images/
gif
name=
button
alt=
CGI&perl天書
border=
WIDTH=
HEIGHT=
></a></td>
</tr>
<tr>
<td width=
%
bgcolor=
#
><p align=
center
><a onmouseover=
img_act(
button
)
onmouseout=
img_inact(
button
)
><img src=
/images/
gif
name=
button
alt=
Homepage技巧
border=
WIDTH=
HEIGHT=
></a></td>
</tr>
</table>
將其中類似<a
/>的語句改為你需要鏈接的文件名
類似img src=
/images/
gif
的語句改為你的圖片名和路徑名
類似WIDTH=
HEIGHT=
的語句改為你的圖片的寬和高
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19542.html