Javascript实现图形交替显示可以生成许多特殊效果(例如左边栏目中的按钮效果)。相关源代码,阿捷的哈哈设计室提供了详细的说明(盈科广告网的按钮效果也采用阿捷的源代码)。

小弟的个人简历、求职资料
动态按钮

图形1
图形1

图形2
图形2

小弟我收集了产生这种效果的代码,与阿捷提供的代码略有不同(实际上大同小异)。

以下代码放入<head>与</head>之间

<script language="JavaScript">
<!-- begin javascript code...
brow = navigator.appName;
vers = parseInt(navigator.appVersion);
if (brow == "Netscape" && vers >= 3) browstatus = "ns3";
else if (brow == "Microsoft Internet Explorer" && vers >= 4) browstatus = "ie4";
else (browstatus = "non");
if (browstatus=="ns3" || browstatus=="ie4") {
var x;
var pic = new Array;
var over = new Array;
var message = new Array;
var no_message = "";
var out = new Array;

over[0] = "images/21.gif";
out[0] = "images/2.gif";
message[0] = "小弟的个人简历、求职资料";

over[1] = "images/31.gif";
out[1] = "images/3.gif";
message[1] = "值得一看的杂文、书摘";

over[2] = "images/41.gif";
out[2] = "images/4.gif";
message[2] = "网友的绝妙文章、百看不厌";

over[3] = "images/51.gif";
out[3] = "images/5.gif";
message[3] = "文学名著之序、评论";

over[4] = "images/61.gif";
out[4] = "images/6.gif";
message[4] = "笑话集锦、幽默短文";

over[5] = "images/71.gif";
out[5] = "images/7.gif";
message[5] = "我的胡言乱语";

over[6] = "images/81.gif";
out[6] = "images/8.gif";
message[6] = "有关ISO质量体系的资料";

over[7] = "images/91.gif";
out[7] = "images/9.gif";
message[7] = "友情链接";

over[8] = "images/101.gif";
out[8] = "images/10.gif";
message[8] = "留言赐教";

over[9] = "images/111.gif";
out[9] = "images/11.gif";
message[9] = "更新邮件通知";

over[10] = "images/121.gif";
out[10] = "images/12.gif";
message[10] = "来信指教";

for (x=0; x < over.length; x++) {
pic[x] = new Image;
pic[x].src = over[x];
}
}
function setMessage(){
status = no_message;
return true;
}
function ChangeOver(ImageNumber) {
if (browstatus=="ns3" || browstatus=="ie4"){
status = message[ImageNumber];
for (x=0; x < over.length; x++) {
if (x != ImageNumber) {
document["button" + x].src = out[x];
}}
document["button" + ImageNumber].src = over[ImageNumber];
}
}
function ChangeOut(ImageNumber) {
if (browstatus=="ns3" || browstatus=="ie4") {
status = no_message;
for (x=0; x < over.length; x++) {
document["button" + x].src = out[x];}
}
}
// -->
</script>

<!--根据自己的需要定义图形路径、图形大小、图形数量>

以下代码放入<body>与</body>之间

<tr>
<td ALIGN="RIGHT" VALIGN="TOP"><a HREF="_private/resume.htm" target="rbottom"onMouseOver="ChangeOver(0);return true;" onMouseOut="ChangeOut(0);return true;"><img
SRC="images/2.gif" ALT="小弟的个人简历、求职资料" NAME="button0" BORDER="0" ALT="小弟的个人简历、求职资料" WIDTH="115" HEIGHT="25"></a></td>
</tr>
<tr>
<td ALIGN="RIGHT" VALIGN="TOP"><a HREF="book/bookone.htm" target="rbottom"onMouseOver="ChangeOver(1);return true;" onMouseOut="ChangeOut(1);return true;"><imgSRC="images/3.gif" ALT="值得一看的杂文、书摘" NAME="button1" BORDER="0"ALT="值得一看的杂文、书摘" WIDTH="115" HEIGHT="25"></a></td>
</tr>
<tr>
<td ALIGN="RIGHT" VALIGN="TOP"><a HREF="zzbj/lhdone.htm" target="rbottom"onMouseOver="ChangeOver(2);return true;" onMouseOut="ChangeOut(2);return true;"><imgSRC="images/4.gif" ALT="网友的绝妙文章、百看不厌" NAME="button2" BORDER="0"ALT="网友的绝妙文章、百看不厌" WIDTH="115" HEIGHT="25"></a></td>
</tr>
<tr>
<td ALIGN="RIGHT" VALIGN="TOP"><a HREF="yulu/ylone.htm" target="rbottom"onMouseOver="ChangeOver(3);return true;" onMouseOut="ChangeOut(3);return true;"><imgSRC="images/5.gif" ALT="文学名著之序、评论" NAME="button3" BORDER="0"ALT="文学名著之序、评论" WIDTH="115" HEIGHT="25"></a></td>
</tr>
<tr>
<td ALIGN="RIGHT" VALIGN="TOP"><a HREF="joke/jokeone.htm" target="rbottom"onMouseOver="ChangeOver(4);return true;" onMouseOut="ChangeOut(4);return true;"><imgSRC="images/6.gif" ALT="笑话集锦、幽默短文" NAME="button4" BORDER="0"ALT="笑话集锦、幽默短文" WIDTH="115" HEIGHT="25"></a></td>
</tr>
<tr>
<td ALIGN="RIGHT" VALIGN="TOP"><a HREF="mybook/myone.htm" target="rbottom"onMouseOver="ChangeOver(5);return true;" onMouseOut="ChangeOut(5);return true;"><imgSRC="images/7.gif" ALT="我的胡言乱语" NAME="button5" ALT="我的胡言乱语"BORDER="0" WIDTH="115" HEIGHT="25"></a></td>
</tr>
<tr>
<td ALIGN="RIGHT" VALIGN="TOP"><a HREF="iso/isoone.htm" target="rbottom"onMouseOver="ChangeOver(6);return true;" onMouseOut="ChangeOut(6);return true;"><imgSRC="images/8.gif" ALT="有关ISO质量体系的资料" NAME="button6"ALT="有关ISO质量体系的资料" BORDER="0" WIDTH="115" HEIGHT="25"></a></td>
</tr>
<tr>
<td ALIGN="RIGHT" VALIGN="TOP"><a HREF="friend.htm" target="rbottom"onMouseOver="ChangeOver(7);return true;" onMouseOut="ChangeOut(7);return true;"><imgSRC="images/9.gif" ALT="友情链接" NAME="button7" ALT="友情链接" BORDER="0"WIDTH="115" HEIGHT="25"></a></td>
</tr>
<tr>
<td ALIGN="RIGHT" VALIGN="TOP"><aHREF="http://abc.yesite.com/cgi-bin/abc.cgi?owner=yangyimin" target="rbottom"onMouseOver="ChangeOver(8);return true;" onMouseOut="ChangeOut(8);return true;"><imgSRC="images/10.gif" ALT="留言赐教" NAME="button8" ALT="留言赐教" BORDER="0"WIDTH="115" HEIGHT="25"></a></td>
</tr>
<tr>
<td ALIGN="RIGHT" VALIGN="TOP"><a HREF="http://coollist.yangyimin.163.net"target="rbottom" onMouseOver="ChangeOver(9);return true;"onMouseOut="ChangeOut(9);return true;"><img SRC="images/11.gif" ALT="更新邮件通知"NAME="button9" ALT="更新邮件通知" BORDER="0" WIDTH="115" HEIGHT="25"></a></td>
</tr>
<tr>
<td ALIGN="RIGHT" VALIGN="TOP"><a HREF="mailto:[email protected]"onMouseOver="ChangeOver(10);return true;" onMouseOut="ChangeOut(10);return true;"><imgSRC="images/12.gif" ALT="来信指教" NAME="button10" ALT="来信指教" BORDER="0"WIDTH="115" HEIGHT="25"></a></td>
</tr>

具体图形、图形大小、框架页面及其超级链接根据您的需要自行定义。
请注意:在head定义图形的次数一定要是实际显示的图形,否则循环错!Javascript语句中定义图形文件名及其后缀名的大小写一定要和实际文件名一致,否则无法显示!(小弟一开始文件后缀名大写,引用时用小写,无法显示,差一点没疯了!)

回索引回主页