更改预定义的身体背景图像

时间:2011-06-24 17:54:24

标签: javascript css hyperlink background-image

我发现这个脚本可以在您点击链接时更改正文的背景图像。它很有效,除了唯一的问题是我不能在css中有预定义的bg图像,否则它不会改变。

所以我删除了背景图像的CSS并且它可以很好地切换图像,但是我想要一个默认的图像开始。

脚本:

    <script language="JavaScript">
<!--

var backImage = new Array(); // don't change this

backImage[0] = "images/bg0.png";
backImage[1] = "images/bg1.png";
backImage[2] = "images/bg2.png";
backImage[3] = "images/bg3.png";
backImage[4] = "images/bg4.png";
backImage[5] = "images/bg5.png";

function changeBGImage(whichImage){
if (document.body){
document.body.background = backImage[whichImage];
}
}

//-->
</script>

链接:

<a href="javascript:changeBGImage(1)">Change2</a>

并且,例如,我希望bg0.png在页面加载时默认为背景。

如果可以在bg图像之间淡出,也会很棒。

提前致谢。

2 个答案:

答案 0 :(得分:1)

将背景保留在CSS中,然后使用此代码

var backImage = [
    "images/bg0.png",
    "images/bg1.png",
    "images/bg2.png",
    "images/bg3.png",
    "images/bg4.png",
    "images/bg5.png"
];

function changeBGImage(whichImage) {
    if (document.body){
        document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
    }
}

答案 1 :(得分:0)

如果在css中定义了背景,则需要更改后台:document.body.style.backgroundImage属性