How Can I Change The Background Image With A Link

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

Solution 1:

A js solution is,

http://jsfiddle.net/NmFru/

HTML

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

JS

functionchangeImage(img){

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

}

Solution 2:

Use some jQuery:

$('#bgimg01').on('click', function() {
    $('body').css('background-image', 'url(http://placehold.it/200x200/ff0000)');
})
$('#bgimg02').on('click', function() {
    $('body').css('background-image', 'url(http://placehold.it/200x200/hh3476)');
})
$('#bgimg03').on('click', function() {
    $('body').css('background-image', 'url(http://placehold.it/200x200/gg0000)');
})

DEMO: http://jsfiddle.net/LPUgF/158/