Question

I have set of images within UL like this :

<ul>
    <li>
        <a href="#">
            <img scr="image1.png">
        </a>
    </li>
    <li>
        <a href="#">
            <img scr="image2.png">
        </a>
    </li>
    <li>
        <a href="#">
            <img scr="image3.png">
        </a>
    </li>
</ul>

Upon click on each image, I want that Image’s src to be applied to body as “background-image”.

I’m not JQuery expert, So any help would be greatly appreciated.

Answer 1

$('#id-of-ul a').click(function(){
var src = $(this).find('img').attr('src');
$('body').css('backgroundImage','url('+src+')');

})