鼠标点击更换背景图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        *{
            padding:0px;
            margin:0px;
        }
        body{
            background:url(8.jpg)  top center;
        }
        div{
            100%;
            height:150px;
            background-color: pink;
            text-align:center;
            padding-top:50px;
        }
        div img{
            cursor:pointer;

        }



    </style>

    <script>
        window.onload=function()
        {
            var p1=document.getElementById("p1");
            p1.onclick=function(){
            document.body.style.backgroundImage="url(images/3.jpg)";
             }
            var p2=document.getElementById("p2");
            p2.onclick=function(){
                document.body.style.backgroundImage="url(images/4.jpg)";
            }
            var p3=document.getElementById("p3");
            p3.onclick=function(){
                document.body.style.backgroundImage="url(images/5.jpg)";
            }
        }
    </script>

</head>
<body>
    <div>
        <img src="3.jpg" alt=""   width="150px"  id="p1"/>
        <img src="4.jpg" alt=""   width="150px"  id="p2"/>
        <img src="5.jpg" alt=""   width="150px"  id="p3"/>
    </div>
</body>
</html>

　　每张图片一点击，整个文档的背景图片就会更换为所点击的图片

　　注意，获取body元素： document.body