javascript - 如何使用链接更改背景图像

Question

我曾尝试在论坛中搜索此内容，但所有结果总是与 div 标签或类似内容有关。似乎没有什么与我自己的问题相关。

我所做的只是在单击链接时将我的页面的背景图像更改为新图像。

当前背景图片的css如下...

body { 
    background:#000000 url(../img/wood01.jpg) no-repeat fixed center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

我只想使用当前为列表格式化的链接...

<li>
    <font color="#FFFFFF">Change Background</font> 
        <ul class="dropup">
            <li><a href="#" id="bgimg01">Link 1</a></li>
            <li><a href="#" id="bgimg02">Link 2</a></li>
            <li><a href="#" id="bgimg03">Link 3</a></li>
        </ul>
</li>

而且我不希望页面在单击链接时刷新。我需要背景动态变化。

Answer 1

一个js解决方案是，

http://jsfiddle.net/NmFru/

HTML

<li>
    <font color="#FFFFFF">Change Background</font> 
        <ul class="dropup">
            <li><a href="#" id="140x101" onclick="changeImage(this.id)">Link 1</a></li>
            <li><a href="#" id="140x102" onclick="changeImage(this.id)">Link 2</a></li>
            <li><a href="#" id="140x103" onclick="changeImage(this.id)">Link 3</a></li>
        </ul>
</li>

JS

function changeImage(img){

    document.body.style.backgroundImage = 'url(http://placehold.it/'+img+')';

}