如何更改背景图片的链接 [英] How can I change the background image with a link

问题描述

我在论坛上试图寻找此，但所有的结果总是事做div标签或类似的东西。似乎没有任何有关我自己的问题。

I've tried searching for this in the forums but all the results are always something to do with div tags or things like that. Nothing seems relevant to my own issue.

我是仅仅是在点击一个链接到我的网页的背景图像更改为一个新的形象。

What I was is simply to change the background image of my page to a new image upon clicking a link.

目前的CSS到背景图像是如下...

The current css to the background image is as follows...

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;
}

和我只是想利用目前格式化列表的链接...

And I just want to use links that currently formatted for lists...

<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>

和我不希望被点击的链接时，页面刷新。我需要在后台动态改变。

And I don't want the page to refresh when the link is clicked. I need the background to change dynamically.

推荐答案

一个JS的解决方案是，

A js solution is,

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+')';

}

这篇关于如何更改背景图片的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！