标题网页换肤
栏目网络与通信
发布2001年22期
人们不难从最近铺天盖地的手机和家用电器广告上发现,“换肤”几乎成了“时尚”手机或家用电器的标准配置。现在,就让你的网页也时尚一次吧(决不是简单的更换网页的背景颜色)。
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--名称:网页换肤-->
<!--作者:富彦-->
<!--作者信箱:scriptstudio@chinaren.com-->
<!--主页:scriptstudio.home.chinaren.com-->
<!-- Begin
if (navigator.appName == "Microsoft Internet Explorer"{
image_directory = "http://www.YOURSITE.com/")
pic1 = new Image() pic1.src = image_directory + "bg02.jpg";
pic2 = new Image() pic2.src = image_directory + "bg01.jpg";
pic3 = new Image() pic3.src = image_directory + "bg03.jpg";
pic4 = new Image() pic4.src = image_directory + "bg04.jpg";
//在这里加入第一段代码
}
function imagechange(imgName){
//函数imagechange,在后面,就是通过调用这个函数改变背景图片的。
if (navigator.appName == "Microsoft Internet Explorer"){
//检测浏览器信息,只有IE4.0以上的微软浏览器才能正确支持。
document.body.background = eval(imgName + ".src");
//改变网页的背景图片属性
}
{
// End -->
</script>
</HEAD>
<BODY>
<body background="clear.jpg" name=bg>
<a href="#" onClick="imagechange('pic1');"><img src="http://www.YOURSITE.com/bg02.jpg" width="50" height="50"></a>
<a href="#" onClick="imagechange('pic2');"><img src="http://www.YOURSITE.com/bg01.jpg" width="50" height="50"></a>
<a href="#" onClick="imagechange('pic3');"><img src="http://www.YOURSITE.com/bg03.jpg" width="50" height="50"></a>
<a href="#" onClick="imagechange('pic4');"><img src="http://www.YOURSITE.com/bg04.jpg" width="50" height="50"></a>
<!--在这里加入第二段代码-->
</body>
</html>
有两点需要注意的是:
1.将代码中的www.YOURSITE.com换成你的网站地址。
2.在选择背景图片的时候最好选用色调相近或相似的图片,以免造成颜色搭配不当。
3.如果想添加更多的背景图片,只须在相应部分加入两段代码即可(代码中有相应的提示)
加入第一段代码:
pic5 = new Image(); pic5.src = image_directory + "bg05.jpg"
加入第二段代码:
<a href="#" onClick="imagechange('pic5');"><img src="http://www.YOURSITE.com/bg05.jpg" width="50" height="50"></a>
其中的数字往下顺延就可以了。