Javascript实现图形交替显示可以生成许多特殊效果(例如左边栏目中的按钮效果)。相关源代码,阿捷的哈哈设计室提供了详细的说明(盈科广告网的按钮效果也采用阿捷的源代码)。
|
|
小弟我收集了产生这种效果的代码,与阿捷提供的代码略有不同(实际上大同小异)。
以下代码放入<head>与</head>之间
<
script language="JavaScript">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>具体图形、图形大小、框架页面及其超级链接根据您的需要自行定义。
请注意:在head定义图形的次数一定要是实际显示的图形,否则循环错!Javascript语句中定义图形文件名及其后缀名的大小写一定要和实际文件名一致,否则无法显示!(小弟一开始文件后缀名大写,引用时用小写,无法显示,差一点没疯了!)